Keyboard moving view up in react native expo - react-native

I am new in react native and I please need help. When the keyboard appears , the whole view is pushed upwards.I do not want that to happen.I saw other answers but none of them is working for me.I do not want the view to be pushed up when the keyboard appears and want to remain where they are.I am using expo and has given the code below with the images.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View, TextInput, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView } from 'react-native';
export default function LoginScreen({ navigation }) {
return (
<View style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
position: 'absolute',
height: 100,
width: 150,
resizeMode: "contain",
top: '3 %'
},
loginInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
},
inputContainer: {
position: 'absolute',
top: '18%',
alignItems: 'center',
},
passwordInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
top: 10
},
loginButtonView: {
position: 'absolute',
height: 46,
width: '70%',
top: '80%'
}
});

I figured out the reason myself.It was happening because i had set my positions based on percentage and the popping of keyboard changed the dimensions resulting in the change of position.

Try to use the component KeyboardAvoidingView like this:
<KeyboardAvoidingView behavior={'height'} enabled style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView >
Try to use different values in the position prop.
If you want less job, you can use the react-native-keyboard-aware-scroll-view. It's a very good lib to work with Keyboard in different layouts.

Related

react-native-modal-dropdown is only displaying 9 values

react-native-modal dropdown only displays 9 values than when I select any value and open the dropdown again it shows me remaining values I have tried this solution
stackoverflow.com/q/68266570/10619360 but its not working you can check the images
<ModalDropdown
ref={dropdown}
style={{ width: '100%' }}
showsVerticalScrollIndicator={false}
options={["Lottes", "Stelzer", "Puchtler", "Reichel", "Hühnermobil", "Simplebakery", "Ruckdeschel", "Seidel", "Bloß", "Wunderlich", "Edeka", "Harles"]}
onSelect={(index, val) => (setValue(val), setError(null))}
renderRow={(rowData, rowID) => renderDropDownList(rowData)}
dropdownStyle={{
marginTop: 0.5,
width: '75%',
borderRadius: 10,
borderWidth: 0,
elevation: 3,
overflow: 'hidden',
}}
>
<Pressable
onPress={() => dropdown.current?.show()}
style={{ marginTop: 40 }}>
<View style={{
...globalStyles.input,
justifyContent: 'space-between',
padding: 2
}}>
<TextInput
editable={false}
value={value}
placeholder='Lieferant'
style={{
...FONTS.regular,
height: 40
}} />
<View
style={{
height: "100%",
borderRadius: 10,
width: '14%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.primary,
}}>
<Image
source={icons.dropdown}
resizeMode="contain"
style={{
height: 15,
width: 12,
tintColor: COLORS.secondary,
}}
/>
</View>
</View>
</Pressable>
</ModalDropdown>
const renderDropDownList = (rowData) => {
return <Text style={{
...FONTS.regular,
fontSize: 14,
padding: 10,
}} >{rowData}</Text>
}

React native background image not showing

I am showing simple image background on my app but don't know why its not showing
my code
return (
<View style={styles.container} >
<StatusBar translucent={true} backgroundColor="transparent" />
<View>
<ImageBackground
style={{ height: '100%', width: '100%', resizeMode: 'cover', opacity: 1, }}
source={require('../../../public/images/hhh.png')}
>
<View style={{
justifyContent: 'center', alignItems: 'center', marginTop: 'auto',
}}>
<Image
source={require('../../../public/icons/success.png')}
// style={styles.iconStyle}
/>
<Text style={styles.orderPlaceText}>
Order Placed
</Text>
<Text style={{
fontSize: 16,
fontWeight: "bold",
color: "white"
}}>
Order# {route.params.orderNumber}
</Text>
<Text style={styles.heading}>
{route.params.brandName}, {route.params.branchLocation.Address}
</Text>
<Text style={styles.description}>
{route.params.description}
</Text>
<Text style={styles.thanks}>
Thank you !
</Text>
</View>
<View style={{
justifyContent: 'center', alignItems: 'center',
marginTop: 'auto', marginBottom: 40
}}>
<TouchableOpacity
style={{
backgroundColor: '#ff8955',
borderRadius: 8,
alignItems: 'center',
justifyContent: 'center',
width: 300,
height: 50,
}}
onPress={() => {
navigation.dispatch(
StackActions.popToTop()
);
navigation.navigate('Orders');
}}
>
<Text style={{ color: 'white', fontSize: 14, fontWeight: 'bold', lineHeight: 23.5 }}>
TRACK MY ORDER
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigation.navigate('Home')}
style={{
width: 300,
height: 50,
borderWidth: 1.5,
borderColor: 'white',
borderRadius: 8,
marginTop: 16,
alignItems: 'center',
justifyContent: 'center'
}}
>
<Text style={{ fontSize: 15, color: 'white' }}>Back to Home</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor:'grey'
},
orderPlaceText: {
fontSize: 28,
color: 'white',
fontWeight: 'bold',
marginTop: 16
},
heading: {
fontSize: 16,
color: 'white',
fontWeight: 'bold',
marginTop: 16
},
description: {
fontSize: 16,
color: 'white',
marginTop: 16,
textAlign: 'center'
},
thanks: {
fontSize: 26,
lineHeight: 31,
color: 'rgb(255, 255, 255)',
fontWeight: 'bold',
marginTop: 16
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
lineHeight: 23
}
})
I am facing an unexpected issue if I change the image to another its working fine means only one image and if any other image it's not showing -_-
I try to rename my image and then try to use it also but that image is not showing is there any issue related to image size or something ? because it's not possible only few image is working and others are not.
Here in your image code
<Image source={require('../../../public/icons/success.png')}
// style={styles.iconStyle}
/>
You haven't added width/height, that must be the reason why your image isn't shown
Please do it this way
<Image style={{width:20, height:20}}
source={require('../../../public/icons/success.png')} />

Reactnative make Dialog background transparent

I am using Dialog to show a popup issue is i am not able to change its background color to transparent.
return (
<View style={styles.container}>
{
loading
? <ActivityIndicator color="#10cea8" size="large" />
: brands == null || brands.length < 1
?
<Text style={{ fontSize: 20, fontWeight: 'bold', color: 'grey' }}>
No restaurants found :(
</Text>
:
<ScrollView contentContainerStyle={{ paddingBottom: 24 }} style={{ paddingBottom: 24 }} keyboardShouldPersistTaps="handled">
<Dialog contentStyle={{ margin: 0, padding: 0, marginTop: 0, paddingTop: 0, backgroundColor: 'rgba(52, 52, 52, 0.9)' }}
visible={dialogVisible}
animationType={'slide'}
>
<View style={styles.pop}>
<Image
source={require('../../../public/images/logo.png')}
resizeMode={'contain'}
style={{
width: 200,
height: 130
}}
/>
<View style={{ height: 10 }}></View>
<Text style={{ textAlign: 'center', color: "white", fontSize: 21, }}>Happy to serve you !</Text>
<Text style={{ textAlign: 'center', color: "white", fontSize: 18 }}>Choose your nearest Branch.</Text>
<View style={{ height: 30 }}></View>
<TouchableOpacity onPress={() => setDialogVisible(false)} style={{ backgroundColor: 'white', width: '100%', height: 45, justifyContent: 'center' }}><Text style={{ textAlign: 'center', color: "#10cea8", fontSize: 18 }}>GOT IT</Text></TouchableOpacity>
</View>
</Dialog>
{
brands.length > 0 && brands.map((b, i) => {
return (
<TouchableOpacity key={`brand-${i}`}
onPress={() => {
navigation.navigate('Menus', {
Locations: b.Locations,
brandID: b.BrandID,
brandName: b.Name
})
}}>
<View style={styles.cardStyle} >
<ImageBackground
style={styles.backgroundImgStyle}
imageStyle={{ borderRadius: 15 }}
source={{ uri: b.CompanyURl }}
>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Image
style={styles.logoStyle}
source={{ uri: b.Image }}
/>
<Text style={styles.title} >
{b.Name}
</Text>
<Text style={styles.description} >
{b.Address}
</Text>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)
})
}
</ScrollView>
}
</View>
)
}
export default Home;
const styles = StyleSheet.create({
pop: {
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomRightRadius: 30,
borderBottomLeftRadius: 30,
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#10cea8'
},
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
cardStyle: {
borderColor: '#B0A8A6',
width: Dimensions.get('window').width - 30,
height: 185,
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginTop: 24
},
backgroundImgStyle: {
width: '100%',
height: '100%',
resizeMode: 'cover'
},
logoStyle: {
justifyContent: 'center',
alignItems: 'center',
width: 65,
height: 65
},
title: {
color: 'white',
fontSize: 20,
marginTop: 10,
lineHeight: 28,
fontWeight: 'bold'
},
description: {
color: 'white',
fontSize: 13,
lineHeight: 20,
fontWeight: '400'
}
});
As you can see i have set backgroundColor to rgba(52, 52, 52, 0.9) but its not going to transparent. if i change it to red or blue something it working but transparent not working on this.
[![enter image description here]
you can see the popup behind borderRadius its showing dark grey color. I need to make it full transparent.

Remove SafeAreaView from Android

I am trying to set the background image to whole screen area including the notch. This is the default on iPhone but I am not able to achieve it on Android Phone. The Android phone I am using is Samsung Galaxy A-01 and the iPhone is iPhone XS. Attached are the screenshots.
Android Screenshot (Not fine)
iPhone Screenshot (I want to achieve this on Android as well)
UPDATE 1:
Following is the code:
render() {
const { roomId, nickName } = this.state;
return (
<>
<StatusBar barStyle='light-content' translucent />
<ImageBackground
source={require('../../../assets/images/backgroundImage.png')}
style={{ flex: 1, justifyContent: 'center', height: '100%' }}
resizeMode='cover'>
<KeyboardAvoidingView
style={{ flexGrow: 1 }}
enabled
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 1,
flexDirection: 'column',
height: '100%',
}}>
<Image
source={require('../../../assets/images/logo.png')}
style={{ marginBottom: 50 }}
resizeMode='contain'
/>
<SafeAreaView
style={{
height: '50%',
justifyContent: 'flex-end',
width: '100%',
}}>
<View
style={{
width: '100%',
justifyContent: 'flex-end',
marginBottom: 10,
}}>
<TextInput
ref={this.classIdRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 15,
paddingHorizontal: 15,
}}
placeholderTextColor='rgb(218, 218, 218)'
placeholder='Class ID'
value={roomId}
onChangeText={(text) => this.setRoomId({ roomId: text })}
/>
<TextInput
ref={this.nicknameRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 20,
paddingHorizontal: 15,
}}
placeholder='Nickname'
placeholderTextColor='rgb(218, 218, 218)'
value={nickName}
onChangeText={(text) =>
this.setNickName({ nickName: text })
}
/>
<TouchableOpacity
onPress={this.navigateToClassroomHandler}
style={{
backgroundColor: 'rgb(251, 158, 85)',
width: '100%',
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
}}
disabled={roomId === '' || nickName === ''}>
<Text
style={{
fontSize: 18,
color: '#fff',
fontWeight: 'bold',
}}>
Attend Class
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
</KeyboardAvoidingView>
</ImageBackground>
</>
);
}

how do I make tabs on React-Native in the middle position of the screen

how do I make tabs on React-Native in the middle position of the screen. if I use tabs it means I can only put it on the screen up or down while I want to be in the middle of the screen. I tried using Navigation but it didn't appear. can anyone help me? thank you
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, ScrollView,
ImageBackground, Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import IndividuScreen from './src/individu';
import UnitScreen from './src/unit';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
render() {
const Appss = createAppContainer(Apps);
return (
<ScrollView>
<View>
<View style={{ width: '100%', height: 60, backgroundColor: '#ed1c24', flexDirection: 'row' }}>
<Icon name="chevron-left" size={15} color={'white'} style={{ marginTop: 25, marginLeft: '3%' }} />
<Image
style={styles.logo}
source={require('./assets/img/icon.png')}
/>
<Icon name="check-square" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '30%' }} />
<Icon name="bell" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '4%' }} />
<Icon name="ellipsis-v" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '4%' }} />
</View>
<ImageBackground
source={require('./assets/img/gedung.png')}
style={{ width: '100%', height: 300, marginBottom: 0, marginTop: 0 }}>
<View style={{ marginTop: 230 }}>
<ScrollView horizontal={true}>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Beranda</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Training Saya</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Katalog</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Jadwal</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>XXXXXX</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>XXXXXX</Text>
</ScrollView>
</View>
</ImageBackground>
<Appss />
{/* Appss Not Show*/}
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row', marginTop: 20 }}>
<Image source={require('./assets/img/medal.png')} style={{ width: 30, height: 35, marginRight: "5%", }} />
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 20, paddingBottom: 10, fontWeight: 'bold' }}>Point CPD Anda: <Text style={{ color: 'red', fontSize: 30, }}>2</Text></Text>
<Text style={{ fontSize: 14, color: 'red' }}>LIHAT RINCIAN POINT CPD > </Text>
</View>
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<Image source={require('./assets/img/book.png')} style={{ width: 30, height: 30, marginRight: "5%", }} />
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Training Saya</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ marginLeft: "5%", marginRight: "15%", textAlignVertical: 'center' }}>
<Text style={{ height: 60, width: 60, borderWidth: 1.5, borderRadius: 50, fontSize: 30, textAlignVertical: 'center', textAlign: 'center', color: 'maroon', fontWeight: 'bold' }}>07</Text>
</View>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>KALENDER</Text>
<Text style={{ fontSize: 25, color: 'maroon', fontWeight: 'bold' }}>Selasa</Text>
<Text style={{ fontSize: 14 }}>SEPTEMBER 2018</Text>
</View>
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', paddingLeft: 15, paddingTop: 10, flexDirection: 'row' }}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>PRUprime healthcare</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>09:00 - 12:00</Text>
<Text style={{ fontSize: 14 }}>Prudential Learning Academy, Lt. 1</Text>
<Text style={{ fontSize: 14 }}>Jakarta</Text>
</View>
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: '40%' }} />
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', paddingLeft: 15, paddingTop: 10, flexDirection: 'row' }}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>PRUfast Start</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>14:00 - 17:30</Text>
<Text style={{ fontSize: 14 }}>Prudential Learning Academy, Lt. 1</Text>
<Text style={{ fontSize: 14 }}>Jakarta</Text>
</View>
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: '40%' }} />
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<Image source={require('./assets/img/book.png')} style={{ width: 30, height: 30, marginRight: "5%", }} />
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Status Belajar</Text>
</View>
<View style={{ textAlign: 'left', paddingLeft: 15 }}>
<Text>TECHNICAL SKILLS</Text>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<Text style={{ fontWeight: 'bold' }}>Syariah Basic Training</Text>
<Text style={{ marginLeft: 15, backgroundColor: 'orange', paddingLeft: 4, paddingRight: 4, color: 'white', fontStyle: 'italic' }}>e-learning</Text>
</View>
</View>
<View style={{ marginTop: 20, flexDirection: 'row' }}>
<Image source={require('./assets/img/progress4.png')} style={{ width: '100%', height: 60, }} />
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: 10 }} />
</View>
</View >
</ScrollView>
);
}
}
const Apps = createStackNavigator({
Individu: {
screen: IndividuScreen,
navigationOptions: {
header: null
}
}, Unit: {
screen: UnitScreen,
navigationOptions: {
header: null
}
}
});
const styles = StyleSheet.create({
logo: {
width: '35%',
height: 40,
marginTop: 10,
marginLeft: '3%',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
for IndividuScreen and UnitScreen which will be displayed on the App but not displayed. if I only return Apps for Individuals and Units to appear. but if I enter it into TAG IndividuScreen and UnitScreen does not appear. maybe you have a way to show two screens in one component. thank you