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.
Related
I'm using a Card from react-native-elements. Turns out I want to add an icon next to its title but I can't get it to look nice.
Here's my code:
<Card
//title={this.props.item.offer.amount + " " + this.props.item.request.good}
title={
<View style={{justifyContent: 'center'}}>
<View style={{display: "flex",flexDirection: "row", justifyContent: 'center'}}>
<Text style={{fontSize: 18, justifyContent: 'center', fontWeight: 'bold'}}>{this.props.item.offer.amount + " " + this.props.item.request.good}</Text>
<View style={{flexGrow: 1}} />
<Button
buttonStyle={styles.localize}
icon={<Ionicons name="md-locate" color={'white'} size={28} style={{alignSelf: 'center'}}/>}
onPress={() => this.props.navigation.push('Rastrear')}
/>
</View>
<View
style ={{
borderWidth: 0.5,
borderColor:'grey',
margin:2,
}}
/>
</View>
}
titleStyle={{textAlign: 'left'}}
containerStyle={{width: Dimensions.get('window').width-25}}>
...
</Card>
Turns out that looks like this:
What I want is to align the title and the icon vertically. How can I achieve this?
If comment out that "title" line you see inside of the Card and comment my personalized one it looks like this:
As you see the title here's centered vertically.
Update. styles.localize looks like this:
localize: {
padding: 4,
backgroundColor: '#FF5733',
borderColor: '#FF5733',
borderWidth: 2,
width: Dimensions.get('window').width-370,
borderRadius: 10,
justifyContent: 'center'
}
Actually, once you have already declared justifyContent to be center in the parent View, this would have effected the rest of the child Views to have this styling prop. What you can do is to replace justifyContent in the second View housing your Text and Icon components with alignItems. This should vertically align them in the space provided by your parent View.
Also, you can set a height constraint in the parent View and textAlignVertical in the Text for better alignment.
<View style={{justifyContent: 'center', height: 60}}>
<View style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 18, textAlignVertical: 'center', fontWeight: 'bold'}}>12 Mouses</Text>
<View style={{flexGrow: 1}} />
<Button
buttonStyle={styles.localize}
icon={<Icon name="md-locate" color={'white'} size={28} style={{alignSelf: 'center'}}/>}
onPress={() => {}}
/>
</View>
<View
style ={{
borderWidth: 0.5,
borderColor:'grey',
margin:2,
}}
/>
</View>
I have included a Snack here for testing. :)
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 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,
},
});
I wanted to implement my own font (from google) to use it inside my app. I loaded it and it works because some text gets changed by it. However some text doenst change which doesnt make sense to me.
I guess its a bug somehow maybe somebody has experienced this. Its a simple screen with simple code.
import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import COLORS from '../assets/COLORS';
import {TextInput} from 'react-native-gesture-handler';
class BMI extends Component {
render() {
const BMI = 20;
return (
<View style={styles.container}>
<Text style={styles.textStyle}> BMI - Calculator </Text>
<Text style={{color: COLORS.white, fontSize: 20}} >Dein momentaner BMI: <Text style={{color: COLORS.primary, fontSize: 24}} >{BMI}</Text> </Text>
<View>
<View style={styles.InputContainer}>
<Text style={styles.inputText}>AGE</Text>
<TextInput style={styles.TextInput} />
</View>
<View style={styles.InputContainer}>
<Text style={styles.inputText}>HEIGHT</Text>
<TextInput style={styles.TextInput} />
</View>
<View style={styles.InputContainer}>
<Text style={styles.inputText}>WEIGHT</Text>
<TextInput style={styles.TextInput} />
</View>
<View style={{marginTop: 25, marginHorizontal: 15}}>
<Button onPress={() => alert("Hello")} title="Calculate" color={COLORS.lightB} />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
// justifyContent: "center",
backgroundColor: COLORS.darkBG,
},
textStyle: {
color: COLORS.lightB,
fontSize: 30,
fontWeight: 'bold',
marginVertical: 30,
fontFamily: "Pacifico"
},
InputContainer: {
justifyContent: 'space-around',
flexDirection: 'row',
width: '100%',
marginVertical: 20,
},
inputText: {
color: COLORS.white,
width: '30%',
marginLeft: 15,
fontSize: 18,
fontFamily: "Pacifico"
},
TextInput: {
backgroundColor: COLORS.primary,
width: '60%',
color: COLORS.white,
fontFamily: "Pacifico"
},
});
export default BMI;
As u can see I load pacifico and it works but only for this text ( see pic below ):
I'm currently working on my React Native's app UI and an alignment problem is killing me: I can't get my text box and text input's texts aligned horizontally.
Here is an excerpt of the render for a line:
render() {
return (
<View style={styles.container}>
<View style={styles.line}>
<Text style={styles.textLabel}>Player name:</Text>
<TextInput
style={styles.textBox}
onChangeText={(playerNameState) => this.setState({playerNameState })}
value={this.state.playerNameState} />
</View>
</View>
);
}
And here are the styles I use (background colour is just for boundingbox reference:
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
backgroundColor: 'white'
},
line: {
flexDirection: 'row',
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
margin: 5,
height: 50
},
textLabel: {
height: 50,
fontSize: 18,
backgroundColor: 'blue',
alignItems: 'center'
},
textBox: {
color: 'grey',
height: 50,
fontSize: 18,
backgroundColor: 'red',
flexGrow: 1,
alignItems: 'center'
}
I think I shouldn't be needing as many alaignItems, but I just wanted to show you what I tried. Any ideas?
Wrap those Text(Input)-Components into Views and it should work:
render() {
return (
<View style={styles.container}>
<View style={styles.line}>
<View style={styles.textLabel}>
<Text>Player name:</Text>
</View>
<View style={styles.textBox}>
<TextInput
onChangeText={(playerNameState) => this.setState({playerNameState })}
value={this.state.playerNameState} />
</View>
</View>
</View>
);}
You can also add justifyContent: 'center' to styles.textBox & textLabel to align the content vertically.