We Keep Coding

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 !

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

Styling a custom modal, unwillingly getting white surface around custom modal

I want to create a welcome Modal which I then import into a seperate MainScreen.js File and implement it there.
No matter how I style the modal, there is always a white surface appearing aroung my modal even tho I tried to make it only appear as a "popup window". I will show you the relevant code parts I struggle with.
MainScreen.js
//Screen Setup for MainScreen
return(
<View style={styles.screen}>
<View style={styles.tophalf}>
<CustomItemPicker/>
</View>
<View style={styles.bottomhalf}>
<View style={styles.topbuttons}>
<CustomButton
style={styles.button}
onPress={addTheItem}
children="Add a Item"
/>
<CustomButton
style={styles.button}
onPress={() => props.navigation.push('Profile')}
children = "My Profile"
/>
</View>
<View style={styles.bottombuttons}>
<CustomButton
style={styles.button}
children = "My Messages"
/>
<CustomButton
style={styles.button}
children = "options"
/>
</View>
</View>
<WelcomeModal
modalVisible={modalVisible}
/>
</View>
)
};
//Visual Definition of all components
const styles = StyleSheet.create({
screen:{
flexDirection: "column",
flex: 1
},
button:{
fontFamily: "AmaticBold",
//Shadow Properties
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.34,
shadowRadius: 6,
elevation: 3.5,
width: 125,
textAlign: 'center'
},
tophalf:{
flex: 1,
alignItems: "center",
justifyContent:"center"
},
bottomhalf:{
flex:1,
alignItems: "center",
flexDirection: 'column',
justifyContent: 'space-between'
},
topbuttons:{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around'
},
bottombuttons:{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around'
}
});
export default MainScreen;
WelcomeModal:
const WelcomeModal = props =>{
return(
<Modal
animationType="slide"
transparent={false}
visible={props.modalVisible}
>
<View style={styles.ModalWindow}>
<View style={styles.modalItemsWrapper}>
<Text style={{fontFamily:"AmaticBold", fontSize: 10}}>
bla bla bla bla bla
</Text>
</View>
<View style={styles.modalItemsWrapper2}>
<Text>Pick a Nickname: </Text>
<TextInput/>
</View>
<View>
<Text></Text>
<Checkbox/>
<Checkbox/>
<Checkbox/>
</View>
</View>
</Modal>
)
};
const styles = StyleSheet.create({
ModalWindow:{
backgroundColor: "red"
margin: 50,
flexDirection: 'column',
alignItems: 'center',
borderColor: "black",
borderRadius: 10,
borderWidth: 2
//justifyContent: "center",
},
modalItemsWrapper:{
//nothing in here for now
}
});
export default WelcomeModal;
Here you can see an image of the result (MainScreen with implemented WelcomeModal
As you can see, the WelcomeModal appears and also has a proper border, the problem is that the modal in reality is full screen and the MainScreen is completely hidden behind the "white surface" that is around the red custom Modal. I dont know how to resolve this problem. Any help is appriciated.

I got help from a discord forum related to react-native and now got a solution that worked out for me:
const WelcomeModal = props =>{
return(
<Modal
animationType="slide"
transparent={true}
visible={props.modalVisible}
>
<View style={{flex:1, backgroundColor: "transparent"}}>
<View style={styles.ModalWrapper}>
<View style={styles.modalItemsWrapper}>
<Text style={{fontFamily:"AmaticBold", fontSize: 10}}>
bla bla bla bla bla
</Text>
</View>
<View style={styles.modalItemsWrapper2}>
<Text>Pick a Nickname: </Text>
<TextInput/>
</View>
<View>
<Text></Text>
<Checkbox/>
<Checkbox/>
<Checkbox/>
</View>
</View>
</View>
</Modal>
)
};
const styles = StyleSheet.create({
ModalWrapper:{
margin: 50,
flexDirection: 'column',
alignItems: 'center',
borderColor: "black",
borderRadius: 10,
borderWidth: 2,
backgroundColor: "red"
},
modalItemsWrapper:{
}
});
export default WelcomeModal;
What solved my problem was to set transparent={true} inside the modal props and then setting the backgroundColor of the wrapping view inside the modal to "transparent". This made only my wanted red modal to appear.

FlatList moves/drags in all directions

When I click on my FlatList I can drag and move it in all directions (up/down/right left). Although the list appears to be vertical (maybe because of the styling), the scroll bar still appears horizontally. How can I disable this dragging?
This is how I am using the FlatList:
<FlatList
data={data.me.friends.nodes}
//horizontal={false}
//scrollEnabled={false}
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
This is from the FriendItem's return
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails')
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/person-512.png',
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
Styles for FriendItem:
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
I also tried removing the TouchableOpacity but it made no difference.

What you can try. is below :
UPDATE:
<Flatlist
bounces={false}/>
try this here, or add bounces={false} in the top scrollView if its there
Hope it helps. feel free for doubts

This issue happened because of some times you have given a width to the parent view of flat list. like below.
<View style={{width: '90%'}}>
<FlatList/>
</View>
simply add the flatlist to the same width with bounces false.
<View style={{width: '90%'}}>
<FlatList
contentContainerStyle={{width: '90%'}}
bounces={false}
/>
</View>
by adding bounces=false, your flatlist will not be able drag to different directions.

Width of buttons not changing in react native

I have two buttons in a row separated by the padding of 20 and they have occupied the width needed for the title of the button. Their width doesn't change!
Code for buttons
<View style={styles.buttonContainer}>
<View style={{ paddingLeft: 20 }}>
<Button title={tick} style={styles.button} onPress color="tomato" />
</View>
<View style={{ paddingLeft: 20 }}>
<Button title="X" style={styles.button} onPress color="tomato" />
</View>
</View>
CSS for buttons
buttonContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
},
button: {
width: 50, // no matter what value I set here, their width doesn't changes
height: 20,
},

In React Native you need to wrap it with a View and give a width to the parent.
So in your example you should put:
<View style={{ paddingLeft: 20, width: 50, height: 20 }}>
<Button title="X" style={styles.button} color="tomato" />
</View>

Make sure you wrap the button around with an extra View. The Button component only takes up as much width as the title is, no matter how much you set in the style
Also dont forget to add the onPress function, boolean (true) is an invalid prop
export default function App() {
const tick = 'tick';
return (
<View style={styles.buttonContainer}>
<View style={{ paddingLeft: 20 }}>
<Button title={tick} style={styles.button} onPress color="tomato" />
</View>
<View style={styles.buttonStyle}>
<Button title="X" style={styles.button} onPress color="tomato" />
</View>
</View>
);
}
const styles = StyleSheet.create({
buttonContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
},
buttonStyle: {
paddingLeft: 20,
width: 200, // this way it works
},
button: {
height: 20,
},
});

"Text strings must be rendered within a <Text> component" in React Native

I've already added <Text></Text> tag after return(, after that the following error resurfaced adjacent tags must be enclosed <></>>
Error message: Text strings must be rendered within a <Text> component. Please request if you need the entire code.
The symbol & represents the error it located at container1:
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";
import BoxContainer from './components/BoxContainer'
export default class App extends Component {
//Binding the function with class
buttonClickListener = () => {
alert("Clicked On Button !!!");
};
render() {
return (
<>
<Text style={styles.headerText}> </Text>
<View style={styles.page}>
<BoxContainer style={styles.container3}>
<View style={[{ width: 50, height : 60, backgroundColor: "orange" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON1"
color="#00B0FF"
/>
</View></BoxContainer>
<BoxContainer style={styles.container1}>
<View style={{flexDirection:'row'}}>
<View style={[{ width: "7%", height :200,backgroundColor: "green" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON1"
color="#00B0FF"
/>
</View>
<View style={[{ width: "92%", height :300, backgroundColor: "red" }]}>
/>
</MapView> <Button
onPress={this.buttonClickListener}
title="BUTTON1"
color="#00B0FF"
/>
</View> </View></View></BoxContainer>
<BoxContainer style={styles.container2}>
<View style={{flexDirection:'column'}}>
<View style={[{ width: 400, height :100, margin: 1, backgroundColor: "blue" }]}>
<Button
onPress={this.buttonClickListener}
title="Button One"
color="#00B0FF"
/>
</View>
<View style={[{ width: 400,height :90, margin: 1, backgroundColor: "black" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Two"
color="#EC407A"
/>
</View>
<View style={[{ width: 400,height :80, margin: 1, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Three"
color="#1DE9B6"
/>
</View></View></BoxContainer></View>
</>
);
}
}
const styles = StyleSheet.create({
page:{flex:1 ,alignItems: "left"},
container1: {&
flex: 7,
map: {position:'absolute'},
flexDirection: 'row',
justifyContent: "left",
alignItems: "left",
backgroundColor: "#F5FCFF"
},
container2: {
flex: 7,
flexDirection: 'column',
justifyContent: "left",
alignItems: "left",
backgroundColor: "#F5FCFF"
},
headerText: {
fontSize: 10,
textAlign: "center",
fontWeight: "bold"
},
});

In React Native, a string must be wrapped inside <Text> string</Text> component. As it needs to be mapped into native component accordingly which doesn't provide flexibility like HTML.
In React, string without <div> or any other component is possible. Since, HTML doesn't give errors on syntax mistake or these type of error.

The code you shared has multiple syntax errors, which makes it hard for me to be sure whether i'm looking at the real issue or not. For example, you close a MapView with </MapView>, but there's no MapView anywhere before that.
As best i can tell, the error is caused by this:
</View> </View>
Since you have a space in the middle of a line of JSX, it's trying to render that space. But in react native, text is only allowed inside a <Text> component.
To avoid these issues in the future, I'd recommend you use a tool such as Prettier or Eslint to format your code. By doing that, this would be split onto two lines, and in so doing any white space is irrelevant, because whitespace at the start and end of lines is ignored. The only way to get this error when formatting your code on two lines would be to do something like the following, which would make the error much more easy to spot:
</View>{" "}
</View>

Check that all your components you used are closed
and You have not declared MapView which will certainly
give an error.
And remove & from container 1.

You declared some extra tags of View and also you add MapView Closing tag but you are not adding starting tag. That's why you are facing this error. I remove that tag and also align you code.
Here is the code
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button } from "react-native";
import BoxContainer from './components/BoxContainer'
export default class App extends Component {
//Binding the function with class
buttonClickListener = () => {
alert("Clicked On Button !!!");
};
render() {
return (
<>
<Text style={styles.headerText}> </Text>
<View style={styles.page}>
<BoxContainer style={styles.container3}>
<View style={[{ width: 50, height : 60, backgroundColor: "orange" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON1"
color="#00B0FF"
/>
</View>
</BoxContainer>
<BoxContainer style={styles.container1}>
<View style={{flexDirection:'row'}}>
<View style={[{ width: "7%", height :200,backgroundColor: "green" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON1"
color="#00B0FF"
/>
</View>
<View style={[{ width: "92%", height :300, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="BUTTON1"
color="#00B0FF"
/>
</View>
</View>
</BoxContainer>
<BoxContainer style={styles.container2}>
<View style={{flexDirection:'column'}}>
<View style={[{ width: 400, height :100, margin: 1, backgroundColor: "blue" }]}>
<Button
onPress={this.buttonClickListener}
title="Button One"
color="#00B0FF"
/>
</View>
<View style={[{ width: 400,height :90, margin: 1, backgroundColor: "black" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Two"
color="#EC407A"
/>
</View>
<View style={[{ width: 400,height :80, margin: 1, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Three"
color="#1DE9B6"
/>
</View>
</View>
</BoxContainer>
</View>
</>
);
}
}
const styles = StyleSheet.create({
page:{flex:1 ,alignItems: "left"},
container1: {
flex: 7,
map: {position:'absolute'},
flexDirection: 'row',
justifyContent: "left",
alignItems: "left",
backgroundColor: "#F5FCFF"
},
container2: {
flex: 7,
flexDirection: 'column',
justifyContent: "left",
alignItems: "left",
backgroundColor: "#F5FCFF"
},
headerText: {
fontSize: 10,
textAlign: "center",
fontWeight: "bold"
},
});