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,
},
});
Related
I have a modal that contains various children components. One of them being a calendar component that is opened after pressing the text "Select Date"
Upon opening the Calendar component renders underneath the other components on the page.
I have tried using position: 'absolute' with a higher zIndex but I still cannot get the Calendar Component to render on top of everything else...how can I accomplish this?
JSX For the components
<View style={styles.container}>
<View style={styles.routineitems}>
<TouchableOpacity >
<Text style={{ }}>Due Date</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>calendarShouldShow(calendarVisible)}>
<Text style={{ }}>Select Date</Text>
</TouchableOpacity>
</View>
<Calendar style={{position: 'absolute',zIndex: 4}}/>
<View style={styles.routineitems}>
<Text>Tags</Text>
<DropDownPicker
placeholder="Tags"
/>
</View>
<View style={styles.routineitems}>
<Text>Notes</Text>
<TextInput
style={styles.input}
onChangeText ={ value => setNotes(value)}
value={notes}
laceholder="Notes"
textAlign={'right'}
/>
</View>
</View>
STYLESHEET
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: '100%'
},
routineitems: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
width: '90%',
marginBottom: '1%',
marginTop: '1%',
alignItems: 'center',
zIndex: 0
},
input: {
height: 40,
width: '30%',
borderRadius: 20,
backgroundColor: 'white',
fontSize: 50,
textAlignVertical:'bottom',
paddingTop: 0,
paddingBottom:0,
textAlign: 'right'
}
});
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.
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.
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"
},
});
I am trying to set an icon inside a text input.
I know, there is this answer.
But it is not working as expected since the icon is outside of the TextInput, I need it to be inside.
This is what I am obtaining so far:
This is my code:
<View style={styles.InputContainer}>
<Ionicons
style={styles.IconWithinInput}
name="ios-search"
size={24}
/>
<TextInput
style={styles.AddEditInputs}
onChangeText={text => this.setState({ text })}
value={this.state.text}
/>
</View>
And the styles:
AddEditInputs: {
flex: 1,
height: 40,
borderWidth: 1,
},
IconWithinInput: {
padding: 10,
},
InputContainer: {
flexDirection: 'row',
},
I made the input borders like a rectangle to show you better what I meant to say.
The last design will be like this:
And as you may see, the input border is at the bottom of the icon too.
What else do I need to achieve what I need?
You cannot directly put icon on the textInput. What you can do is wrap the icon and textInput with the view with flexDirection set to row and provide the left padding to the icon so that it seems to appear as in textInput. If you want to do so you can use something like this
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{ flexDirection: 'row' }}>
<View style={{justifyContent: "center", marginRight: 5 }}>
<Image
source={{
uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png',
}}
style={{ width: 10, height: 10 }}
/>
</View>
<TextInput placeholder="Enter your name" />
</View>
</View>
But my suggestion is to use the Input component of react-native-elements as it has leftIcon as props. You can find more information at here
<View style={{flex: 1, flexDirection: 'row'}}>
<Image
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
style={{borderWidth: 1,width: 40, height: 40}}
/>
<TextInput
onChangeText={(text) => this.setState({text})}
value={this.state.text}
style={{borderWidth: 1, height: 40, borderColor: 'grey'}}
/>
<View>
Wrap the component with flex and provide width for the icon. You can set the icon by having some wrapper around since it can not be included inside textbox.