Develop Reference

Why isn't my box shadow showing on Android?

I'm quite new to React Native and React in general, and I'm stuck on this particular problem:
I followed some tutorials and other answers on other posts there on StackOverflow, but I can't manage to see the border Shadow I set on these "cards". The shadow isn't displayed on my phone.
I hope so of you old wizards of the internet can help me find a solution to this problem, I'd be really grateful.
export class Boss extends Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
hp: props.hp,
ap: props.ap,
};
}
render(){
return(
<View style={styles.cardContainer}>
<View style={[styles.cardBackground , this.state.hp > 0 ?
{ backgroundColor: 'gold' }
: { backgroundColor: 'red' }]}>
<View style={styles.cardFrame}>
<Text style={styles.cardName}>{this.props.name}</Text>
<View style={styles.bossLifeWrapper}>
<Button title={'+'} onPress={this.incrementeHP}></Button>
<Text style={styles.bossHP}>{this.state.hp}</Text>
<Button title={'-'} onPress={this.decrementeHP}></Button>
</View>
<Text style={styles.bossAP}>{this.state.ap}</Text>
<Text style={styles.bossPowerLabel}>{this.props.passive}</Text>
<View style={styles.cardTextBox}>
<Text style={styles.bossPowerLabel}>Pouvoir: {this.props.powerLabel}</Text>
<Text style={styles.bossEnrageLabel}>Enrage: {this.props.enrageLabel}</Text>
</View>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
cardContainer: {
width: '80%',
height: 450,
backgroundColor: "#171314",
alignItems:"center",
borderStyle: "solid",
borderColor: "black",
borderWidth: 1,
margin: '10%',
borderRadius: 10,
padding: 10,
shadowColor: "white",
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.44,
shadowRadius: 10.32,
elevation: 16,
},
cardBackground: {
backgroundColor: '#171314',
borderRadius: 5,
padding: 10,
zIndex: 0
},
cardFrame: {
zIndex: 1,
position: 'relative',
height: '98%',
maxWidth: '97%',
left: '1%',
top: '0.5%',
display: 'flex',
flexDirection: 'column',
backgroundColor: 'white'
},
cardName: {
flex: 1,
backgroundColor: 'red',
alignItems:"center",
borderStyle: "solid",
borderBottomColor: "grey",
borderBottomWidth: 5,
margin: 5,
marginHorizontal: 5,
fontSize: 20,
height: 10
},
bossHP: {
width: '100%',
color: 'blue'
},
bossAP: {
width: '100%',
color: 'red'
},
bossLifeWrapper: {
flex: 1,
flexDirection: "column"
},
});

have you tried elevate in box styles? ex: elevate:10,

React Native Keyboard pushing the header(Android)

When the TextInput is onFocus the keyboard keeps pushing the content and the header outside the screen, with or without the KeyboardAvoidingView Component, the behaviour is the same.
I tried the following in the manifest:
android:windowSoftInputMode="adjustPan"
when I changed the above to
android:windowSoftInputMode="adjustResize"
it works fine the header is not being pushed but it pushes all the views which is found under the TextInput above the keyboard which is not desired
android:windowSoftInputMode="adjustNothing"
it shows no effect even if i added the KeyboardAvoidingView Component
My Code
<SafeAreaView style={{ flex: 1 }} forceInset={{ top: 'never' }}>
<StatusBarPlaceHolder />
<StatusBar barStyle="light-content" hidden={false} backgroundColor="#A4395A" translucent={true} />
<Header title={'ارسال دعوة'} />
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<Text style={{ fontSize: 15, fontWeight: 'bold', textAlign: 'right', marginHorizontal: 15, marginTop: 5, fontFamily: Fonts.Cairo }}>نوع المناسبة</Text>
<View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 5 }}>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgGe, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-General.png'))} >
<Image resizeMode='stretch' style={{ borderRadius: 5, height: height / 8, width: width / 6 }} source={require('../../assets/T-General.png')} />
</TouchableOpacity>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgG, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Grad.png'))} >
<Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Grad.png')} />
</TouchableOpacity>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgE, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Eng.png'))}>
<Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Eng.png')} />
</TouchableOpacity>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgB, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Birthday.png'))}>
<Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Birthday.png')} />
</TouchableOpacity>
<TouchableOpacity style={{ borderRadius: 8, width: width / 6, backgroundColor: this.state.bgW, marginHorizontal: 2.5 }} onPress={() => this.setType(require('../../assets/T-Wedding.png'))}>
<Image resizeMode='stretch' style={{ height: height / 8, width: width / 6 }} source={require('../../assets/T-Wedding.png')} />
</TouchableOpacity>
</View>
<KeyboardAvoidingView style={{flex:1}}>
<ScrollView style={{flex:1, backgroundColor: 'white' }} ref={scrollView => this.scrollView = scrollView}>
<View style={{ justifyContent: 'space-between', flexDirection: 'row', marginHorizontal: 5 }}>
<View style={{ flex: 1, marginHorizontal: 5 }}>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >يوافق الهجري</Text>
<View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<TextInput
underlineColorAndroid='transparent'
value={this.state.dateH}
onChangeText={(value) => this.setState({ dateH: value })}
style={{
flex: 1, paddingBottom: 7,
textAlign: 'right', marginHorizontal: 10
}} placeholder={'الهجري'} />
</View>
</View>
<View style={{ flex: 1, marginHorizontal: 5 }}>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >التاريخ ميلادي</Text>
<View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<DatePicker
date={this.state.date}
mode="date"
placeholder="اختار التاريخ"
format="YYYY-MM-DD"
minDate="2019-1-1"
maxDate="2020-1-1"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
locale={"ar"}
customStyles={{
dateIcon: {
height: 0,
width: 0
},
dateInput: {
marginLeft: 45,
paddingBottom: 10,
borderWidth: 0,
}
// ../.. You can check the source to find the other keys.
}}
onDateChange={(date) => this.setDate(date)}
/>
</View>
</View>
</View>
<View style={{ flex: 1, justifyContent: 'space-between', flexDirection: 'row', marginHorizontal: 5, marginTop: 5 }}>
<View style={{ flex: 1, marginHorizontal: 5 }}>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >موقع المناسبة</Text>
<View style={{ flex: 1, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<TextInput
underlineColorAndroid='transparent'
multiline
blurOnSubmit
onChangeText={(value) => this.setState({ location: value })}
style={{
flex: 1, paddingBottom: 7,
textAlign: 'right', marginHorizontal: 10
}} placeholder={'الشارع الحي'} />
</View>
</View>
<View style={{ flex: 1, marginHorizontal: 5 }}>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginBottom: 5, fontFamily: Fonts.Cairo }} >الداعي</Text>
<View style={{ flex: 1, padding: 8, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<TextInput
underlineColorAndroid='transparent'
multiline
blurOnSubmit
onChangeText={(value) => this.setState({ fromD: value })}
style={{
flex: 1, paddingBottom: 7,
textAlign: 'right', marginHorizontal: 10
}} placeholder={'اسم الداعي'} />
</View>
</View>
</View>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginTop: 5, marginHorizontal: 10, fontFamily: Fonts.Cairo }} >نص الدعوة</Text>
<View style={{ flex: 1, marginHorizontal: 10, marginTop: 5, backgroundColor: '#F3F3F3', borderRadius: 5 }}>
<TextInput
underlineColorAndroid='transparent'
multiline
onBlur={() => this.scrollView.scrollTo({ x: 0, y: 0, animated: true })}
onFocus={Platform.OS=='ios'? () => this.scrollView.scrollTo({ x: 0, y: 90, animated: true }):null}
blurOnSubmit
onChangeText={(value) => this.setState({ body: value })}
style={{
flex: 1, paddingBottom: 7, height: height / 7,
textAlign: 'right', marginHorizontal: 10
}} placeholder={'نتشرف بحضوركم لحفل تخرج ولدنا عثمان الصفادي'} />
</View>
<Text style={{ fontSize: 15, fontWeight: '700', textAlign: 'right', marginTop: 5, marginHorizontal: 10, fontFamily: Fonts.Cairo }} >ملحاظات</Text>
<View style={{ flex: 1, alignItems: 'flex-end', marginHorizontal: 10, marginTop: 5, }}>
<TextInput
underlineColorAndroid='transparent'
multiline
blurOnSubmit
onBlur={() => this.scrollView.scrollTo({ x: 0, y: 0, animated: true })}
onFocus={Platform.OS=='ios'? () => this.scrollView.scrollTo({ x: 0, y: 195, animated: true }):null}
onChangeText={(value) => this.setState({ notes: value })}
style={{
width: width / 2, paddingHorizontal: 10,
paddingBottom: 7, height: height / 10,
textAlign: 'right', backgroundColor: '#F3F3F3', borderRadius: 5
}} placeholder={'ممنوع اصطحاب الاطفال..'} />
</View>
</ScrollView>
</KeyboardAvoidingView>
<View style={{ alignItems: 'center', justifyContent: 'flex-end' }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={() => this.designCard()} style={{
justifyContent: 'center', width: width / 3, backgroundColor: '#753C4C', padding: 7,
borderTopLeftRadius: 5, borderBottomLeftRadius: 5, height: 45, marginVertical: 20, marginHorizontal: 1, alignSelf: 'center'
}}>
<Text style={{ color: 'white', textAlign: 'center', fontSize: 18, fontFamily: Fonts.Cairo }}>تصميم كرت</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.takephoto()} style={{
justifyContent: 'center', borderTopRightRadius: 5, borderBottomRightRadius: 5,
backgroundColor: '#753C4C', height: 45, width: width / 3, padding: 7, marginVertical: 20, marginHorizontal: 1, alignSelf: 'center'
}}>
<Text style={{ color: 'white', textAlign: 'center', fontFamily: Fonts.Cairo, fontSize: 18 }}>ادراج كرت</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>

try
<KeyboardAvoidingView behavior='padding'>

TextInput not showing on focus

I have a text input named email or user name when i click on it, it doesn't show the values I type,I think it's because of the screen size, is there anyway I can adjust the Textinput so that when I click on it, the full text input show and I can see my values typed.
The other text inputs underneath it shows, but it doesn't show, should i wrap it in a scrollview, please any help will be nice, Thanks.
This is the page
when i click on email or username
wrapping the view in a scroll view brings this
MY CODE
<View style={{
height: 42, width: 72,
backgroundColor: '#EFB879', marginTop: '15.15%',
alignSelf: 'center'
}}>
<Text style={{
fontFamily: 'mont-bold',
fontSize: 34,
color: '#fff'
}}>
sẹlẹ
</Text>
</View>
<View style={{
width: '83.33%',
height: this.state.visible? 240 : 180,
backgroundColor: '#fff',
position: 'absolute',
bottom: 0,
alignSelf: 'center',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
}}>
<View style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
borderBottomWidth: 0.7,
borderColor: '#d9d8d8',
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
}}>
<TextInput placeholder="Email or mobile number"
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}/>
</View>
<View style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
borderBottomWidth: 0.7,
borderColor: '#d9d8d8',
}}>
<TextInput placeholder={picked}
value={this.state.text}
onChangeText={(text) => this.handleChange(text)}
onFocus={() => this.setState({visible: true})}
onBlur={() => this.setState({visible: false})}
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}
contextMenuHidden={true}/>
</View>
{this.state.visible ? <View style={{
justifyContent: 'flex-end',
height: 200,
width: '100%',
}}>
<Text style={styles.textHead}>
Select your Institute
</Text>
{view}
</View> : <View hide={true} style={{
width: '100%',
height: 60,
backgroundColor: '#fff',
justifyContent: 'center'
}}>
<TextInput placeholder="Password"
placeholderStyle={{fontSize: 14, fontFamily: 'mont'}}
placeholderTextColor="#615D5D"
underlineColorAndroid={'transparent'}
secureTextEntry={true}
style={{
alignSelf: 'center',
flex: 1,
paddingTop: 10,
paddingRight: 25,
paddingBottom: 10,
width: '85%',
paddingLeft: 0,
padding: 4,
backgroundColor: '#fff',
fontSize: 14, fontFamily: 'mont', color: '#615D5D',
}}/><View style={{
width: 18, height: 11,
position: 'absolute', right: 25
}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../eye.png')}/>
</View>
</View>}
</View>
</View>
<View style={{
width: '83.36%',
height: 60,
backgroundColor: '#EFB879',
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
borderBottomRightRadius: 6,
borderBottomLeftRadius: 6,
}}>
<Text style={{
fontFamily: 'mont-semi',
fontSize: 16,
color: '#fff'
}}>
SIGN UP
</Text>
</View>
<View
style={{
height: 0,
width: 120,
borderBottomWidth: 1.2,
borderColor: '#d9d8d8',
alignSelf: 'center',
marginTop: '50%'
}}>
</View>
<View style={{width: '100%',
height: 2,flexDirection: 'row',
// alignSelf: 'center',
justifyContent: 'center',
marginTop: '5%'}}>
<Text style={{
color: '#615D5D',
fontFamily: 'mont-medium',
fontSize: 14,
alignSelf: 'center',
}}>
Already have an account? </Text>
<TouchableNativeFeedback
onPressIn={() => this.setState({pressed: !this.state.pressed})}
onPressOut={() => this.setState({pressed: !this.state.pressed})}
onPress={this.onP.bind(this)}>
<Text
style={{
color: '#EFB779',
fontFamily: 'mont-medium',
fontSize: this.state.pressed? 16: 14,
alignSelf: 'center',}}>
SIGN IN
</Text>
</TouchableNativeFeedback>
</View>
</View>

This works to me:
Use the Keyboard API from React Native to set listeners on keyboard.
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
Use a state variable to set scrollEnabled prop of the ScrollView (that wrap your content) to true or false according to the keyboard is shown or not. So when the keyboard is shown the scroll will be enabled.
At the bottom of your content add a conditional View with some height that is active when the keyboard is shown thus you will be able to scroll.
Remember this:
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}

Place your entire code inside ScrollView and use fixed positions for your views. Try it.

There is no onchangetext() event in first and last textInput.try to add it in your code.
constructor(props) {
super(props);
this.state = { email:'',text:'',password:'' };
}
...
<TextInput
onChangeText={(email) => this.setState({email})}
value={this.state.email}
/>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(password) => this.setState({password})}
value={this.state.password}
/>
i hope this helps you

View goes hidden when status bar is set

I have a component it has a view of flex: 1 with a status bar component and a child component, when the status bar element isn't there the indicator shows, but when I add the status bar element, the indicator goes hidden, Please how can i make the indicator show while the status bar is added, what is making it go hidden
With the StatusBar(The indicator goes hidden)
Without the StatusBar(The Indicator shows)
THE CODE
CHILD COMPONENT(On)
import {BoxShadow} from 'react-native-shadow';
export default class On extends Component {
render() {
const shadowOpt = {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height / 10,
color: "#000",
border: 10,
opacity: '0.15',
radius: 20,
x: 0,
y: 5,
}
const dimensions = Dimensions.get('window');
const Height = (dimensions.height);
const Width = dimensions.width;
return (
<View style={{flex: 1}}><View name="indicator" style={{flexDirection: 'row',}}>
<View style={{backgroundColor: '#cbcdda', width: Width, height: Height / 60}}>
</View>
<View style={{
backgroundColor: '#EFB879',
width: (this.state.width),
height: Height / 60,
position: 'absolute'
}}>
</View>
</View>
<ViewPagerAndroid
onPageSelected={this.onPageSelected.bind(this)}
ref={(viewPager) => {
this.viewPager = viewPager
}}
style={{height: Height - ((Height / 30) + (Height / 10))}}
initialPage={0}>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="1">
<Image style={{marginBottom: 50,}} source={require('../on1.png')}/>
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
Welcome to Sẹlẹ
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
Hire services and buy and sell {'\n'} on Sẹlẹ
</Text>
</View>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="2">
<Image style={{marginBottom: 50, width: '35%', height: '35%'}}
source={require('../sele2.png')}/>
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
With Sẹlẹ, you can
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
Hire services and buy and sell {'\n'} on Sẹlẹ
</Text>
</View>
<View style={{
backgroundColor: 'white',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
flexDirection: 'column'
}} key="3">
<Text style={{
fontFamily: 'mont',
color: '#000',
fontSize: 22,
letterSpacing: 0.5,
marginBottom: 12
}}>
Select your School
</Text>
<Text style={{
fontFamily: 'mont',
color: '#615D5D',
fontSize: 16,
letterSpacing: 1,
textAlign: 'center'
}}>
You've made it this far {'\n'} select your school on the next page {'\n'} and let's get
started
</Text>
</View>
</ViewPagerAndroid>
<BoxShadow setting={shadowOpt}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
flex: 1,
backgroundColor: 'white',
}}>
<TouchableNativeFeedback>
<Text style={{
fontSize: 18,
marginLeft: 25,
fontFamily: 'mont',
color: '#615D5D',
marginBottom: 10
}}>Skip</Text>
</TouchableNativeFeedback>
<View style={{flexDirection: 'row'}}><View
style={{marginRight: 14, alignSelf: 'center'}}>
<View style={this.state.no == "0" ? styles.selected : styles.unselected}>
</View>
</View>
<View style={{marginRight: 14}}>
<View
style={this.state.no == "1" ? styles.selected : styles.unselected}>
</View>
</View>
<View
style={this.state.no == "2" ? styles.selected : styles.unselected}>
</View></View>
<TouchableNativeFeedback onPress={this.update.bind(this)}>
<Text style={{
fontFamily: 'mont',
color: '#EFB879',
fontSize: 18,
marginRight: 25,
marginBottom: 10
}}>Next</Text>
</TouchableNativeFeedback>
</View>
</BoxShadow>
</View>
);
}
}
PARENT ELEMENT
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
timePassed: false,
};
}
render() {
return (
<View style={{flex: 1}}>
<StatusBar backgroundColor='#EE8F62' translucent={true} barStyle='light-content'/><On/>
</View>
);
}
}

We had similar problem for android, This is how we handle it was, may be this will help you to find a better solution.
You need to create a const and assign status bar size as a value.
const NAVBAR_HEIGHT = Platform.select({
ios: { marginTop: 0 },
android: { marginTop: window.height / 8 }
});
Then in the style section should add this line,
marginTop: NAVBAR_HEIGHT.marginTop
Like this,
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#E7EBF0",
marginTop: NAVBAR_HEIGHT.marginTop
}
});
This is how we create status bar for our application,
<View style={styles.container}>
{/* if ios status bar will be added to the screen */}
{Platform.OS === "ios" ? (
<Statusbar backgroundColor="#000000" barStyle="light-content" />
) : null}
</View>

Image will not resize to fit window, all other fixes make the image disappear - React Native

I'm having an issue with React Native. I'm trying to put an image as a header, which needs to resize itself responsively to fit inside of the viewport and be centred horizontally.
Unfortunately, I'm unable to produce any sort of result using styling arguments such as resizeMode: 'contain' and the image disappears when following the advice of people who say to use the styling arguments width: undefined and height: undefined.
I'm a bit new to React Native so it's certainly possible that there's a blindingly obvious issue with how I'm approaching this problem. I'm also new to posting on Stack Overflow so any pointers about how best to describe or show my problem would also be most welcome.
Here is the source code I am using which produces the result where the image is too big for the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image going off the side of the screen
And here is the Source Code I am using where the image disappears off the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
height: undefined,
width: undefined,
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image disappeared entirely

After viewing the related questions, I found a solution which worked for me. Adding the following styling arguments did the trick:
width: null,
resizeMode: 'contain',
height: 220
The Stack Overflow question this solution was taken from