CODEWITHSUNDEEP
javascriptreactjsreact-native
khristy_01
khristy_01

Reputation: 37

React native view to next line?

Iam creating a react native project in which am displaying multiple views in a row and after certain width, it needs to go to next line ! But its not going, how to do that ?

Actual Output:
word1  word-word2  word-word-word3  word-word-word4

Expected Outpu: 
word1  word-word2  word-word-word3
word-word-word4

This is my code:

<View style={{  flexDirection :'row',  marginHorizontal: 10, paddingTop: 7,
                paddingBottom: 7, width: 150 }}>
       <View style={{ paddingRight: 10 } }>
               <Text style={{  fontSize: 12 }}>word1</Text>
       </View>
                        
       <View style={{ paddingRight: 10 }}>
              <Text style={{  fontSize: 12 }}>word-word2</Text>
       </View>

        <View style={{ paddingRight: 10 } }>
                <Text style={{  fontSize: 12 }}>word-word-word3</Text>
        </View>

        <View style={{ paddingRight: 10 } }>
             <Text style={{  fontSize: 12 }}>word-word-word4</Text>
        </View>  
</View>

This is my expo "Check this"

Please suggest !

Upvotes: 1

Views: 1819

Answers (1)

Ketan Ramteke
Ketan Ramteke

Reputation: 10651

enter image description here

Give parent View of Text components flexWrap:"wrap" style:

<View
            style={{
              flexDirection: 'row',
              marginHorizontal: 10,
              paddingTop: 7,
              paddingBottom: 7,
              width: Constants.width * 0.3,
              flexWrap: 'wrap' 
            }}>

Full Example:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
        <View style={{ backgroundColor: '#eff3f8' }}>
          <View
            style={{
              flexDirection: 'row',
              marginHorizontal: 10,
              paddingTop: 7,
              paddingBottom: 7,
              width: Constants.width * 0.3,
              flexWrap: 'wrap' 
            }}>
            <View style={{ paddingRight: 10 }}>
              <Text style={{ fontSize: 12 }}>word1</Text>
            </View>

            <View style={{ paddingRight: 10 }}>
              <Text style={{ fontSize: 12 }}>word-word2</Text>
            </View>

            <View style={{ paddingRight: 10 }}>
              <Text style={{ fontSize: 12 }}>word-word-word3</Text>
            </View>

            <View style={{ paddingRight: 10 }}>
              <Text style={{ fontSize: 12 }}>word-word-word4</Text>
            </View>
          </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Working App : Expo Snack

Upvotes: 5

Related Questions