I am new using flexbox and react native. I am trying to do something very simple and center the text. However it doesn't seem to be working. Below is the code I am using. Any help would be really appreciated. Thanks!
<View style={{"display": "flex","align-items": "center","justify-content":"center"}}>
<Text> {selected_order_date} {selected_order_time} </Text>
</View>
<View style={{"flexDirection": "row","alignItems": "center","justifyContent":"center"}}>
<Text> {selected_order_date} {selected_order_time} </Text>
</View>
Related
I have the following code using the Text and Button components from react-native-paper:
<Text>See also </Text>
<Button mode="text" compact onPress={this.nav( name )}>Compass</Button>
<Text> on how to use the Compass.</Text>
When rendered this results in:
If I replace the Button with TouchableOpacity or alike the result looks like:
How can I style the Button or TouchableOpacity so it's not offset in regard to the surrounding text?
UPDATE
Using the example from #RajendranNadar and after fixing so it runs on android:
See also <Pressable onPress={() => alert('Hello :)')}><Text style={styles.text}>Compass</Text></Pressable> on how to use the Compass.
results in
One way to accomplish this is to use nested texts. Something like this:
const NestedText = () => {
return (
<Text>See also <Text style={styles.link} onPress={() => {}}>Compass</Text> on how to use the Compass.</Text>
);
};
const styles = StyleSheet.create({
link: {
color: 'blue',
textDecorationLine: 'underline'
}
});
This is the best approach to using the Pressable component from the react-native package
<Text>
See also <Pressable onPress={() => alert('Hello')}>Compass</Pressable> on how to use the Compass.
</Text>
Check the live demo here https://snack.expo.dev/#raajnadar/pressable-example
Pressable component docs
Here you can create a text button or height a text.
this is a text
<Text
style={{...styles.paragraph, color: "red"}}
onPress={() => Linking.openURL('my.app.com/your_url')}>
Term of Services
I want to make 2 in one line, one flex-end and one flex-start, but I am not able to make it inline after applying flex-end and flex-start to the two separately. Anyone have idea how to do this?
<View style={{flexDirection: 'row'}}>
<Text style={{alignSelf: 'flex-start'}}>Line 1</Text>
<Text style={{alignSelf: 'flex-start'}}>Line 2</Text>
</View>
Just use justifyContent:'space-between' and you are done, no need to use anything in Text
<View style={{flexDirection: 'row', justifyContent:'space-between'}}>
<Text>Line 1</Text>
<Text>Line 2</Text>
</View>
I'm having trouble understanding how to align items in MUI. I have the following code:
class SignUpForm extends React.Component {
render() {
return (
<Button sx={{ justifyContent: "flex-end" }}
color="inherit" }>Sign Up</Button>
)
}
}
which is composed by:
class Nav extends React.Component {
render() {
return (
<Box sx={{ flexGrow: 1}}>
<AppBar position="static">
<Toolbar>
<SignUpForm />
</Toolbar>
</AppBar>
</Box>
)
}
}
But unfortunately the content is still staying to the left. Using this resource https://mui.com/system/properties, I might be missing an important CSS concept here. Could anyone enlighten me?
Thank you.
Toolbar is a flexbox, so you can add a div on the left side and set justify-content to space-between to push the Button to the right:
<Toolbar sx={{ justifyContent: "space-between" }}>
<div />
<SignUpForm />
</Toolbar>
I'm pretty sure you just need to change sx={{ justifyContent: "flex-end" }} to sx={{ marginLeft: "auto" }} on the Button
Might help someone in the future, if you also include where you're importing your components from. Personally, when I encountered the sx not working (realized this was the issue because when I inspected the element says sx=[Object object]), it's because I should've been importing Toolbar from #mui/material, see this reference. Also, I'm using #mui/material v 5.10.11. PS. I'm using Auto-import extension on VSCode, hence, the incorrect import from cause.
I'm experiencing a lot of difficulty trying to implement a "double modal", i.e. two modals at the same time.
e.g.
I'm using Overlay from the 'react-native-elements' library to achieve the modal effect, however, putting two of them together in a view isn't working as it will only display the first one. I'm also finding that directly setting the height of the overlay isn't having any effect.
I then considered creating a custom component but can't figure out how to dim the background using CSS.
If you want, change the your element modal to react-native-modal. Keep try and execute the below code. I hope it'll work for you.
import Modal from 'react-native-modal';
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
<TouchableOpacity onPress={toggleModal}>
<Text>Button Text</Text>
<Modal
isVisible={isModalVisible}
onBackdropPress={() => setModalVisible(false)}>
<View style={{ backgroundColor: 'white', padding: 20, height:250 }}>
<Text>First box content appear here</Text>
</View>
<View style={{ backgroundColor: 'white', padding: 20, height:100, marginTop: 30 }}>
<Text>Second box content appear here</Text>
</View>
</Modal>
</TouchableOpacity>
I am trying to center an Image within a View both horizontally and vertically the problem is that no matter what I put in the code it still seems to be in the same position all the time. I have this code for another View from another screen and it's exactly how I need it to be, however for the other pages it's not responding.
Here is my code:
<View style={styles.header}>
<Icon
raised
name='chevron-left'
type='octicon'
color='#f50'
onPress={() => this.props.navigation.goBack()}
containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
<Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignItems:'center', marginTop:30, position:'absolute'}}/>
</View>
const styles = StyleSheet.create({
header:{
backgroundColor:'#ff4714',
height:SCREEN_HEIGHT/8,
flexDirection: 'row'
}
});
EDIT: I've removed all the styling for the <Image> except for width and height and the image stays at the same place. I don't know what to make of this
Here is an expo snack https://snack.expo.io/SyCO!ree8
You need to add justifyContent:'center' and alignSelf:'center' to your image style,
Just check the code :
<View style={{
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}}>
<Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50,alignSelf:'center'}} />
</View>
And this is expo snack : expo-snack
UPDATE:
HERE IS MY UPDATED EXPO SNACK:
check here
Hope it helps
Try adding:
alignItems: 'center',
justifyContent: 'center'
to your header style
You might also need to add flex:1, depending on the state of your View