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 - How to get same output in two different pages in react-native with same code?

(React native )
Here is my code for one screen(DetailsScreen) and I want to make other screen(IngredientScreen) with same output how to do that. when I tried to copy the same code in IngredientScreen I am getting some error. what kinds of modification do I need in DetailsScreen and what kinds of code need to be added in IngredientScreen. page need to be navigate from DetailsScreen to IngredientScreen. (react native )
Codes are here :-
import React from "react";
import { SafeAreaView, StyleSheet, View, Text, Image } from "react-native";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import Icon from "react-native-vector-icons/MaterialIcons";
import COLORS from "../../consts/colors";
import foods from "../../consts/foods";
import { SecondaryButton } from "../components/Button";
const DetailsScreen = ({ navigation, route }) => {
const item = route.params;
return (
<SafeAreaView style={{ backgroundColor: COLORS.white }}>
<View style={style.header}>
<Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
<Text style={{ fontSize: 20, fontWeight: "bold" }}>Details</Text>
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<View
style={{
justifyContent: "center",
alignItems: "center",
height: 280,
}}
>
<Image source={item.image} style={{ height: 220, width: 220 }} />
</View>
<View style={style.details}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text
style={{ fontSize: 25, fontWeight: "bold", color: COLORS.white }}
>
{item.name}
</Text>
</View>
<Text style={style.detailsText}>{item.details}</Text>
<View style={{ marginTop: 40, marginBottom: 40, color: "red" }}>
<TouchableOpacity
onPress={() => navigation.navigate("IngredientScreen")}
>
<SecondaryButton title="Ingredients..." />
</TouchableOpacity>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
};
const style = StyleSheet.create({
header: {
paddingVertical: 20,
flexDirection: "row",
alignItems: "center",
marginHorizontal: 20,
},
details: {
paddingHorizontal: 20,
paddingTop: 40,
paddingBottom: 60,
backgroundColor: COLORS.primary,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
},
iconContainer: {
backgroundColor: COLORS.white,
height: 50,
width: 50,
justifyContent: "center",
alignItems: "center",
borderRadius: 30,
},
detailsText: {
marginTop: 10,
lineHeight: 22,
fontSize: 16,
color: COLORS.white,
},
});
export default DetailsScreen;

You could create a new component and then import it in both screens. For example:
const DetailScreen = () => {
return <ReusableComponent />
}
const Ingredientcreen = () => {
return <ReusableComponent />
}
export const ReusableComponent = () => {
return (
<SafeAreaView style={{ backgroundColor: COLORS.white }}>
<View style={style.header}>
<Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
<Text style={{ fontSize: 20, fontWeight: "bold" }}>Details</Text>
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<View
style={{
justifyContent: "center",
alignItems: "center",
height: 280,
}}
>
<Image source={item.image} style={{ height: 220, width: 220 }} />
</View>
<View style={style.details}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text
style={{ fontSize: 25, fontWeight: "bold", color: COLORS.white }}
>
{item.name}
</Text>
</View>
<Text style={style.detailsText}>{item.details}</Text>
<View style={{ marginTop: 40, marginBottom: 40, color: "red" }}>
<TouchableOpacity
onPress={() => navigation.navigate("IngredientScreen")}
>
<SecondaryButton title="Ingredients..." />
</TouchableOpacity>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}

React Native Styling & Flex -- Centering A Component

I'm having incredible difficulty figuring out why my stylesheet isn't working the way that I want it to -- I want both the icon [note the comments] as well as the button on the bottom to appear centered, but both currently appear left-aligned. Would be grateful for any + all direction.
Here are my imports:
import { useNavigation } from '#react-navigation/native';
import React from 'react';
import {
Text,
SafeAreaView,
ScrollView,
View,
TouchableOpacity,
ActivityIndicator,
Alert
} from 'react-native';
import { withNavigation } from 'react-navigation';
import { firebase } from '../../../../firebase/config';
import styles from './styles';
import DateTimePicker from '#react-native-community/datetimepicker';
import { Sae } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { FontAwesome } from '#expo/vector-icons'
Here is the code returned from my class component:
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.inputContainer}>
<View>
<Text style={styles.title}>Create An Event</Text>
</View>
<Sae
style={{marginLeft: 10, marginRight: 10, marginBottom: 10}}
labelStyle={{color: '#656565'}}
label={'Event Name'}
iconClass={FontAwesomeIcon}
iconName={'calendar-check-o'}
iconColor={'#e95530'}
inputPadding={16}
labelHeight={20}
borderHeight={2}
autoCapitalize={'none'}
autoCorrect={false}
/>
<Sae
style={{marginLeft: 10, marginRight: 10}}
labelStyle={{color: '#656565'}}
inputStyle={{fontSize: 16}}
label={'Event Description'}
iconClass={FontAwesomeIcon}
iconName={'pencil'}
iconColor={'#e95530'}
inputPadding={16}
labelHeight={20}
borderHeight={2}
autoCapitalize={'none'}
autoCorrect={false}
/>
<View style={styles.break1}></View>
<View style={styles.break2}><FontAwesome name='circle' color='#e6a80c'/></View> //would like this icon to be centered
<View style={styles.break3}></View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Date </Text>
<DateTimePicker
testID='datePicker'
value={this.state.date}
mode='date'
is24Hour={true}
display='default'
onChange={this.onChange}
placeholder='Select a date'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Start Time </Text>
<DateTimePicker
testID='timePicker'
value={this.state.eventStartTime}
mode='time'
is24Hour={true}
display='default'
onChange={this.onChange}
placeholder='Start time'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>End Time </Text>
<DateTimePicker
testID='timePicker'
value={this.state.eventEndTime}
mode='time'
is24Hour={true}
display='default'
onChange={this.onChangeEventEndTime}
placeholder='End time'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Guests' Votes Due By </Text>
<DateTimePicker
testID='datePicker'
value={this.state.votingDeadline}
mode='date'
is24Hour={true}
display='default'
onChange={this.onChangeVotingDeadline}
placeholder='Votes Due By'
style={{ marginHorizontal: 10 }}
/>
</View>
</View>
<View style={styles.buttonContainer}> //would like this button to appear centered also
<TouchableOpacity
style={styles.button}
onPress={() => this.storeEvent()}
>
<Text style={styles.Btn}>Create Event</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
And here is the stylesheet:
export default StyleSheet.create({
container: {
backgroundColor: '#ffffff',
flex: 1,
justifyContent: 'center'
},
inputContainer: {
padding: 10
},
indInputContainer: {
margin: 8
},
break1: {
marginBottom: 20,
marginTop: 20
},
break2: {
alignContent: 'center',
justifyContent: 'center'
},
break3: {
marginTop: 10,
marginBottom: 10
},
text: {
fontSize: 16,
color: '#656565',
},
preferences: {
fontWeight: 'bold',
fontSize: 20,
margin: 5,
},
title: {
padding: 5,
fontSize: 16,
fontWeight: 'bold',
color: '#e95530'
},
buttonContainer: {
justifyContent: 'center',
alignContent: 'center'
},
button: {
backgroundColor: '#e95531',
margin: 10,
marginTop: 20,
height: 48,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
width: 275,
},
Btn: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
preloader: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
});
Would be super grateful for some help. Thank you!

React Native Own font doesnt get applied to all elements

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 ):

Layout and render a View in a MapView component - React native

Im fairly new to React native. I have created a MapView component on my screen and am trying to add a map key that indicates what each marker color is. I was able to achieve this only to find out that the layout bugs out when I leave and return to that screen
Example
This is what i'm trying to achieve
This is what I keep getting
This is my code
<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
<View style={{ flex: 0.6 }}>
<MapView
style={{ flex: 1 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
{/* Map key view begins here */}
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text style={{ color: '#fff', fontSize: 16 }}>
{'Existing Crossings'}
</Text>
</View>
</View>
<Marker coordinate={location} />
</MapView>
</View>
Any help would be very appreciative. please let me know if I am missing any vital information on this post.

I found out that I must wrap my map key View in a <Fragment/> Component outside of the <MapView> component. I also had to style it with position:"absolute"
Heres My code
<View style={{ flex: 0.6 }}>
<MapView
style={{ flex: 1 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
<Marker coordinate={location} />
</MapView>
<Fragment>
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
position: 'absolute',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text style={{ color: '#fff', fontSize: 16 }}>
{'Existing Crossings'}
</Text>
</View>
</View>
</Fragment>
</View>