We Keep Coding

ScrollView cut off in React Native

I have encountered a problem. ScrollView is cut off at the bottom of the screen on both Android and iOS. It's "unscrollable". My code is rather simple:
<View style={{ flex: 1 }}>
<ScrollView style={styles.container}>
<Image
style={styles.image}
source={{ uri: constants.media_url + "/" + data.img }}
/>
<Text style={styles.title}>{data.heading}</Text>
<Text style={styles.published_date}>{data.published_date}</Text>
<Text style={styles.introduction}>
{stripHTML(data.introduction)}
</Text>
<RenderHtml contentWidth={width} source={source} />
</ScrollView>
</View>
const styles = StyleSheet.create({
container: {
backgroundColor: colors.background,
padding: 10,
flex: 1,
},
image: {
width: "100%",
maxHeight: 270,
height: "100%",
},
title: {
fontSize: 24,
marginTop: 20,
fontWeight: "bold",
},
introduction: {
fontWeight: "bold",
},
text: {
fontWeight: "normal",
marginTop: 13,
},
published_date: {
color: colors.gray,
marginVertical: 10,
},
});
As you can see I have used flex tricks, I've also tried padding, everything. It just doesn't work. I use only two libraries in my project: "react-native-render-html": "^6.3.4", and React Navigation.
Thank you!

So, after hours of searching and trying, literally, I have done it.
<View style={{ flex: 1 }}>
<ScrollView
style={styles.container}
contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }}
>
<Image
style={styles.image}
source={{ uri: constants.media_url + "/" + data.img }}
/>
<Text style={styles.title}>{data.heading}</Text>
<Text style={styles.published_date}>{data.published_date}</Text>
<Text style={styles.introduction}>
{stripHTML(data.introduction)}
</Text>
<RenderHtml contentWidth={width} source={source} />
</ScrollView>
</View>
What I changed is I added contentContainerStyle={{ flexGrow: 1, paddingBottom: 300 }} to my ScrollView component. For me 300 worked, maybe you can change according to your needs.

React Native Component Renders under other components inside a modal

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'
}
});

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.

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,
},
});

Can't align text horizontally in ReactNative UI

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.