I am having the following modal box. Problem is whatever renderContent displays gets overflows visually outside the right boundary of modal box. How to fix it?
<Modal
transparent
animationType="fade"
visible={this.state.visible}
onRequestClose={this.hideModal}
>
<Container style={styles.overlay}>
<View style={[styles.container]}>
{ this.renderContent() }
</View>
</Container>
</Modal>
renderContent = () => {
return (
<ShopList
ref={ref => (this.shopList = ref)}
loadData={this.props.fetch}
/>
);
};
styles
overlay: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Colors.overlay,
},
container: {
backgroundColor: Colors.white,
borderRadius: Metrics.WIDTH * 0.04,
flexDirection: 'column',
width: '96%',
},
Did you try this?
container: {
overflow: hidden,
backgroundColor: Colors.white,
borderRadius: Metrics.WIDTH * 0.04,
flexDirection: 'column',
width: '96%',
},
If not work, define max and min lengths to width content
Related
I started to learn React Native two days ago and I am wondering why the backgroundColor "yellow" and "green" are not working. My whole screen is white. I thought that, because I used 3 times a flex: 0.5, that the screen is devided in 3 parts with different backgroundColors. What is the problem here? The dividing in 3 parts seems to work, because the text is, image and button are on the top 1/3, but the second 1/3 and third 1/3 are white.
Here is the code:
console.log("App executed");
return(
<View style={styles.viewStyles}>
<Text style={styles.textStyles} onPress={() => console.log("Text clicked")}>Beispielfüroben</Text>
<TouchableOpacity onPress={() => console.log("Bild clicked")}>
<Image source={require("./assets/books.jpg")} style={styles.logoStyles}></Image>
</TouchableOpacity>
<Button
style={styles.buttonStyles}
title= "Beispielbutton"
onPress={() => Alert.alert("Hallo", "I bims 1 clown",[{text: "hallo", onPress: () => console.log("Hallo clicked")}, {text: "no"}])}
></Button>
<View style={{backgroundColor: "yellow", flex: 0.5}}/>
<View style={{backgroundColor: "green", flex: 0.5}}/>
</View>
)
};
const styles = StyleSheet.create({
viewStyles: {
backgroundColor: "white",
flex: 0.5,
alignItems: 'center',
justifyContent: 'center'
},
Can you help me?
Thanks a lot :)
The issue here is that a View, which does not contain any children, won't fill any space unless we are telling it to do so.
The flex property will only
define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.
Hence, let your Views occupy 100% of the available height and width. If the flex property is equal for both views, then the available space will be filled equally.
If you want to let the text, button and touchable opacity, occupy 1/3 of the screen, then you need to put them inside the same parent view with a flex of 1 as well and provide the same height and width percentage (100 in both cases).
export default function App() {
return (
<SafeAreaView style={styles.viewStyles}>
<View style={{ width: '100%', height: '100%', flex: 1, alignItems: 'center' }}>
<Text onPress={() => console.log('Text clicked')}>Beispielfüroben</Text>
<TouchableOpacity onPress={() => console.log('Bild clicked')}>
<Image
source={require('./assets/snack-icon.png')}
style={styles.logoStyles}></Image>
</TouchableOpacity>
<Button
title="Beispielbutton"
onPress={() =>
Alert.alert('Hallo', 'I bims 1 clown', [
{ text: 'hallo', onPress: () => console.log('Hallo clicked') },
{ text: 'no' },
])
}></Button>
</View>
<View
style={{
backgroundColor: 'yellow',
flex: 1,
width: '100%',
height: '100%',
}}
/>
<View
style={{
backgroundColor: 'green',
flex: 1,
width: '100%',
height: '100%',
}}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
viewStyles: {
backgroundColor: 'white',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
logoStyles: {
width: 24,
height: 24,
},
});
The result is as follows
Here is a snack.
I have a component with a ScrollView that works, and I want to add a scenario where for an example I want to fit all content on the screen width, and for other scenarios I want to scroll through them. How Can I achieve that ?
Here is my current Implementation:
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={styles.container}
contentContainerStyle={styles.containerContainer}
>
<View>
<View style={styles.tabs}>
{Object.keys(tabs).map((item, index) => {
const isSelected = item === selectedTab;
return (
<Tab
key={item}
item={tabs[item]}
select={() => select(index, item)}
setMeasures={(width) => setWidth(width, index)}
isSelected={isSelected}
gap={gap}
/>
);
})}
</View>
<Animated.View
style={[
styles.indicator,
{
transform: [{ translateX: value }],
},
measures[selectedIndex]
? { width: measures[selectedIndex] - gap }
: null,
]}
/>
</View>
</ScrollView>
and here is the stylings
indicator: {
backgroundColor: BURNING_ORANGE,
height: hp(2),
width: 0,
},
label: {
alignItems: 'center',
color: CLOUD_BURST,
fontFamily: CIRCULARMEDIUM,
marginVertical: hp(10),
},
selectedLabel: {
alignItems: 'center',
color: BURNING_ORANGE,
fontFamily: CIRCULARMEDIUM,
marginVertical: hp(10),
},
tab: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
paddingEnd: wp(20),
},
tabs: {
flexDirection: 'row',
},
Also, If I added flex: 1 to contentContainerStyle of my ScrollView the View just dissappear
I have trouble understanding how ScrollView works in React Native. In my view, I have a scrollview that is wrapped in a containerview with containerStyle that has a flex:1. However the elements inside my view dont scroll..
render() {
const {containerStyle, eventsWrapperStyle, footerStyle} = styles
return (
<View style={containerStyle}>
<Header/>
<ScrollView style={eventsWrapperStyle}>
{this.renderEvents()}
{this.renderMonthlyStats()}
</ScrollView>
<Footer>
<View style={styles.footerButtonsWrapper}>
<Button customStyle={styles.footerButtonStyle} onPress = {() => this.props.resetAppInfo()}>NEW</Button>
<Button customStyle={styles.footerButtonStyle} onPress={() => this.props.logoutUser()}>SIGN OUT</Button>
</View>
</Footer>
</View>
)
}
const styles = {
monthlyStatsWrapper: {
margin: 10,
flexDirection: 'column'
},
monthlyStatsLine: {
width: '85%',
alignItems: 'center',
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between'
},
containerStyle: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
},
footerButtonsWrapper: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
},
footerButtonStyle: {
width: 170
},
eventsWrapperStyle: {
marginTop: 50,
padding: 30,
flex: 1,
paddingBottom: 100,
}
};
Could you help me understand how scrollView works and make my elements inside it scroll ?
Here's the code for the Footer element which is absolutely positioned (might be part of the problem ?)
class Footer extends Component {
render(){
const { footerStyle } = styles;
return (
<View style={[footerStyle, this.props.customStyle]}>
{this.props.children}
</ View>
);
}
};
const styles = {
footerStyle: {
position: 'absolute',
width: '100%',
bottom: 0,
height: 130,
backgroundColor: '#FCFCFC'
}
};
I'm trying to make 2 colors of background using flex, and it seems to work good but I want to make the button on the middle as in the photo, where I need to insert the button in the code?
i want it to be like this:
return (
<View style={container}>
<View style={leftContainer}>
</View>
<View style={rightContainer}>
</View>
<Button
title="button"/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row'
},
leftContainer:{
flex:1,
backgroundColor: '#ca8afa',
},
rightContainer:{
flex:1,
backgroundColor: '#96d0e3'
},
addButton: {
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
bottom: 20,
right: 20,
zIndex: 1111,
width: calcSize(192 / 2),
height: calcSize(192 / 2)
}
})
the problem is that the button is also in the row now and not in the middle,
how can i fix it?
Here's a live demo of a possible solution: https://snack.expo.io/HJFL7A3ez
Edit - Adding the code here as well:
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.leftContainer}>
</View>
<View style={styles.rightContainer}>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.addButton} title="button"/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row'
},
leftContainer:{
flex:1,
backgroundColor: '#ca8afa',
},
rightContainer:{
flex:1,
backgroundColor: '#96d0e3'
},
buttonContainer: {
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
},
addButton: {
zIndex: 1111,
width: 200
}
})
I currently have a multiline textInput that automatically expands and a button below it. The problem is that the button's location seems to be fixed, it doesn't move down and textInput would just run over it.
Everything is wrapped in a KeyboardAvoidingView:
<KeyboardAvoidingView
style={styles.container}
behavior="padding">
<StatusBar barStyle="light-content"/>
<Text style={styles.title}>{this.state.form.prompt}</Text>
<View style={styles.simpleContainer}>
{this._renderForms()}
<View style={[styles.forwardButtonLocation, styles.indentLeft]}>
<ForwardButton
onButtonPress={this._submitInfo}
/>
</View>
</View>
<View style={{flex: 1, justifyContent: 'flex-end', alignItems: 'flex-end',}}>
<SkipButton
onButtonPress={this._nextState}
/>
</View>
</KeyboardAvoidingView>
this._renderForms() renders the corresponding form for each state, in this case, it renders:
<View style={styles.simpleContainer}>
<AutoExpandingTextInput
style={styles.textContentDark}
placeholder={this.state.form.userInput}
placeholderTextColor={DARK_THEME_CONTENT_COLOR_SECONDARY}
onChangeText={(userInputValue) =>
//TODO: Saving text to nested userInput is causing problem, temporarily save it to userInputValue
//this.setState({form: {...this.state.form, userInput: text}}
this.setState({userInputValue}
)}
/>
</View>
Here is my style sheet:
const styles = StyleSheet.create({
simpleContainer: {
flex:1,
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'space-between',
backgroundColor: THEME_COLOR,
},
title: {
flex: 1,
marginTop: '15%',
marginLeft: '3%',
fontWeight: 'bold',
fontSize: TITLE,
color: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
textContentDimmed: {
fontSize: TITLE_SECONDARY,
color: DARK_THEME_CONTENT_COLOR_SECONDARY,
},
textContentWhite: {
fontSize: TITLE_SECONDARY,
color: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
textContentDark: {
fontSize: TITLE_SECONDARY,
color: LIGHT_THEME_CONTENT_COLOR_SECONDARY,
},
indentLeft: {
marginLeft:'10%',
},
forwardButtonLocation: {
flex: 1,
justifyContent: 'flex-start',
},
whiteLine: {
width: '100%',
height: 1,
marginTop: 4,
marginHorizontal: '6%',
backgroundColor: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
});
Is there any way to automatically relocate the button when the size of the textInput changes?