Develop Reference

Camera not displaying after reloading app or running npx react-native start for the 2nd time

I have implemented tensor-flow camera functionalities for pose detection on a website and then hosted it on netlify. Link: https://uactivsite-mobile.netlify.app/.Also github link of the same: https://github.com/viveksgonal/uactivsite/blob/main/src/App.js
I am using this as webview on react-native app. The first time the app builds perfectly and the camera starts. But whenever I try to reload it or run npx react-native start the second time, the camera never opens.
If anyone knows where I'm going wrong, it would be pleasure if you provide the solution. Thank you.
Code is attached below for the react-native app part:
/* eslint-disable react-native/no-inline-styles */
import React, { useRef, useState } from 'react';
const exercises = [
{
name: 'High Knees',
total: 20,
index: 0
},
{
name: 'Jumping Jacks',
total: 25,
index: 1
},
{
name: 'Squats',
total: 20,
index: 2
},
]
import WebView from 'react-native-webview'
import {
View,
StyleSheet,
Text,
Image,
TouchableWithoutFeedback,
Modal
} from 'react-native';
import { useNavigation } from '#react-navigation/native';
const ExerciseCamera = () => {
const webviewRef = useRef(null)
const navigation = useNavigation();
const [speed, setSpeed] = useState(0)
const [reps, setReps] = useState(0)
const ex = 1
function getInjectableJSMessage(message) {
return `
(function() {
window.dispatchEvent(new MessageEvent('message', {
data: ${JSON.stringify(message)}
}));
})();
`;
}
function onMessage(data) {
let val = JSON.parse(data.nativeEvent.data)
if (val.type === 'reps') {
setReps(val.data.rep)
if (val.data.speed !== 0) {
setSpeed(val.data.speed)
}
}
else if (val.type === 'completed') {
navigation.navigate('dashboard', {
screen: 'completeddailyexercise',
});
}
else {
console.log(val.data.rep)
}
}
function sendDataToWebView(msg) {
webviewRef.current.injectJavaScript(
getInjectableJSMessage(msg)
);
}
return (
<View style={styles.container}>
<Modal
transparent={true}
visible={true}
>
<View style={styles.top_container}>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate('dashboard', {
screen: 'completeddailyexercise',
});
}}>
<Image
style={styles.icons_container}
source={require('../../Assets/play.png')}
/>
</TouchableWithoutFeedback>
<View style={styles.exercise_name_container}>
<Text style={styles.exercise_name}>Side lunges</Text>
</View>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate('dashboard', { screen: 'dailychallange' });
}}>
<View style={styles.icons_container}>
<Image
style={styles.icon}
source={require('../../Assets/close.png')}
/>
</View>
</TouchableWithoutFeedback>
</View>
<View style={styles.bottom_container}>
<View style={styles.timer_container}>
<Text style={styles.timer_text}>02:47</Text>
</View>
{reps > 0 ? (
<View
style={[
styles.number_container,
{ justifyContent: speed > 0 ? 'space-between' : 'center' },
]}>
{speed > 0 ? <Text style={styles.number}>{speed} RS</Text> : null}
<Text style={styles.number}>{reps}/{exercises[ex].total}</Text>
</View>
) : null}
</View>
</Modal>
<WebView
ref={webviewRef}
mediaPlaybackRequiresUserAction={false}
source={{ uri: 'https://uactivsite-mobile.netlify.app/' }}
scalesPageToFit={false}
mixedContentMode="compatibility"
onMessage={onMessage}
onLoad={event => {
sendDataToWebView({
data: exercises[ex],
type: 'exercise'
})
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
preview: {
flex: 1,
},
top_container: {
zIndex: 1,
position: 'absolute',
top: 43,
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
},
bottom_container: {
zIndex: 1,
position: 'absolute',
bottom: 0,
width: '100%',
},
number: { color: 'white', fontSize: 28 },
exercise_name_container: {
height: 40,
width: 155,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: 'rgba(255,255,255,0.2)',
},
number_container: {
height: 62,
backgroundColor: 'black',
width: '100%',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 19,
},
timer_container: {
width: '100%',
height: 78,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
backgroundColor: 'rgba(255,255,255,0.45)',
alignItems: 'center',
},
timer_text: { color: 'black', fontSize: 48, fontFamily: 'Poppins-Bold' },
icons_container: {
height: 40,
width: 40,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 50,
backgroundColor: 'rgba(255,255,255,0.8)',
},
icon: { width: 16, height: 16, resizeMode: 'contain' },
exercise_name: { color: 'black', fontFamily: 'Poppins-SemiBold', fontSize: 23 },
});
export default ExerciseCamera;

How to do this calendar circular swipe scroll with 3 texts

Here is my model.
I would like this animation :
When I swipe left, the month March takes the central place, and April replaces March in the right
When I swipe right, the month January takes central place, and December replaces January in the left
I literally don't know where to begin, or how to achieve this.
For the code used in the image, here it is :
import React from 'react';
import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
const MonthSlider = () => {
return (
<View
style={{
flexDirection: 'row',
flex: 0.2,
paddingBottom: 100,
}}>
<View
style={{
flexDirection: 'column',
flex: 0.25,
alignItems: 'center',
marginTop: 10,
}}>
<TouchableOpacity
style={{alignItems: 'center'}}
onPress={() => alert('January clicked')}>
<View style={styles.nonActiveCircle} />
<Text style={styles.nonActiveMonth}>January</Text>
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'column',
flex: 0.5,
alignItems: 'center',
marginTop: 10,
}}>
<View style={styles.activeCircle} />
<Text style={styles.year}>2021</Text>
<Text style={styles.activeMonth}>February</Text>
</View>
<View
style={{
flexDirection: 'column',
flex: 0.25,
marginTop: 10,
alignItems: 'center',
}}>
<TouchableOpacity
style={{alignItems: 'center'}}
onPress={() => alert('March clicked')}>
<View style={styles.nonActiveCircle} />
<Text style={styles.nonActiveMonth}>March</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
nonActiveMonth: {
fontSize: 20,
color: '#8BA8C3',
fontWeight: 'bold',
},
activeMonth: {
fontSize: 30,
color: 'white',
fontWeight: 'bold',
},
nonActiveCircle: {
width: 8,
height: 8,
borderRadius: 8 / 2,
backgroundColor: '#8BA8C3',
marginTop: 10,
},
activeCircle: {
width: 25,
height: 25,
borderRadius: 25 / 2,
backgroundColor: 'white',
borderWidth: 5,
borderColor: '#175287',
bottom: 20,
marginBottom: -20,
},
year: {
fontSize: 20,
color: '#8BA8C3',
},
});
export default MonthSlider;

Maybe a good start would be use 'react-view-slider' or 'ScrollView' and do something like this :
import React, { useState } from 'react';
import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
import Swiper from 'react-native-swiper';
const MonthSlider = () => {
// Months
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
// State iMonths
const [ iMonth, setIMonth ] = useState(1);
// Month click
const MonthClick = (i) => {
alert( months[i] +' clicked')
setIMonth(i);
};
// This function renders the view at the given index.
const renderView = ({ index, active }) => (
months.map( (month,i) =>
<View key={i} style={styles.month + ( active == i ) ? styles.active : styles.inactive }>
<TouchableOpacity
style={styles.bt}
onPress={() => MonthClick(i)}
>
<View style={ active == i ? styles.activeCircle : styles.nonActiveCircle } />
<Text style={ active == i ? styles.activeMonth : styles.nonActiveMonth }>{month}</Text>
</TouchableOpacity>
</View>
)
);
return (
<Swiper style={styles.monthWrapper} showsButtons={false} horizontal={true} showsPagination={false}>
{renderView(0,0)}
</Swiper>
);
};
const styles = StyleSheet.create({
/* New styles */
monthWrapper:{
flex:0.5,
display:'flex',
flexDirection: 'row',
height:'100px',
textAlign:'center',
},
bt:{
textAlign:"center"
},
month:{
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
active:{
color:'#000',
flex: 0.5,
opacity:1,
fontSize: 30,
color: 'white',
fontWeight: 'bold',
},
inactive: {
fontSize: 20,
color: '#8BA8C3',
fontWeight: 'bold',
},
/* Old styles */
nonActiveMonth: {
fontSize: 20,
color: '#8BA8C3',
fontWeight: 'bold',
},
activeMonth: {
fontSize: 30,
color: 'white',
fontWeight: 'bold',
},
nonActiveCircle: {
width: 12,
height: 12,
borderRadius: '100%',
backgroundColor: '#8BA8C3',
marginTop: 10,
alignSelf:'center'
},
activeCircle: {
width: 40,
height: 40,
borderRadius: '100%',
backgroundColor: 'white',
borderWidth: 5,
borderColor: '#175287',
bottom: 20,
marginBottom: -20,
},
});
export default MonthSlider;

multiline header - React Native

I have a React Native App.
I want to add a subtitle below my header.
Something like this
Header Code:
static navigationOptions = ({ navigation }) => {
return {
title: localizedTitle(),
headerTintColor: '#fff',
headerStyle: {
backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
},
headerTitleStyle: {
fontWeight: 'bold',
textAlign: 'center',
fontSize: normalizeFontSize(18),
flex: 1
},
headerLeft: <BackButton
accessible={false}
testID='LeftButton'
accessibilityLabel="headerLeftButton"
/>,
headerRight: (<View></View>),
}
}
How can I implement this multiline header?
Update:
I tried 2 ways and both are so frustrating.
1st method:
the back button and user details are not aligned. the back button is moved up.
static navigationOptions = ({ navigation }) => {
return {
title: localizedTitle(),
headerTintColor: '#fff',
headerStyle: {
backgroundColor: HAGo_isUndercareMode() ? HAGo_getUndercareColor() : 'rgb(255,0,0)'
},
headerTitleStyle: {
fontWeight: 'bold',
textAlign: 'center',
fontSize: normalizeFontSize(18),
flex: 1
},
headerLeft: (
<View>
<HAGo_BackButton
accessible={false}
testID='LeftButton'
accessibilityLabel="headerLeftButton"
/>
{
HAGo_isUndercareMode() ?
<View >
<View style={{flexDirection: 'row', backgroundColor:'#008A20', width:500, alignItems:'center'}}>
<Image style={{ width:40, height:40, marginRight:15}} source={require('../HAGo/default_userIcon.png')} />
<Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
</View>
</View>
: null
}
</View>
),
headerRight: (<View></View>),
}
}
2nd method:
not able to align them to the left.
static navigationOptions = ({ navigation }) => {
return {
headerTitle: () =>
<View>
<Text style={{color: '#fff', fontSize:normalizeFontSize(18), fontWeight:'bold'}} >{localizedTitle()}</Text>
<View style={{flexDirection: 'row', justifyContent: 'flex-start'}}>
<Image style={{ width:40, height:40, marginRight:15}} source={require('../HAGo/default_userIcon.png')} />
<Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
</View>
</View>,
headerTintColor: '#fff',
headerStyle: {
backgroundColor: HAGo_isUndercareMode() ? HAGo_getUndercareColor() : 'rgb(255,0,0)'
},
headerTitleStyle: {
fontWeight: 'bold',
textAlign: 'center',
fontSize: normalizeFontSize(18),
flex: 1
},
headerLeft: <HAGo_BackButton
accessible={false}
testID='LeftButton'
accessibilityLabel="headerLeftButton"
/>,
headerRight: (<View></View>),
}
}
Which method makes sense?? Please help.
2nd Update:
static navigationOptions = ({ navigation }) => {
return {
title: localizedTitle(),
headerTintColor: '#fff',
headerStyle: {
backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
},
headerTitleStyle: {
fontWeight: 'bold',
textAlign: 'center',
fontSize: normalizeFontSize(18),
flex: 1
},
headerLeft: (
<View>
<View style={{paddingTop: isUndercareMode() ? 45 : 0}} >
<BackButton
accessible={false}
testID='LeftButton'
accessibilityLabel="headerLeftButton"
/>
</View>
{
isUndercareMode() ?
<Undercare />
: null
}
</View>
),
headerRight: (<View></View>),
}
}
Undercare component:
export default class Undercare extends React.Component {
render() {
return (
<View>
<View style={{flexDirection: 'row', width:500, height:58, alignItems:'center', paddingLeft:25, backgroundColor:'#008A20', paddingTop:15, paddingBottom:20, backgroundColor:'#008A20'}}>
<Image style={{ width:50, height:50, marginRight:20}} source={require('../HAGo/default_userIcon.png')} />
<Text style={{fontSize: normalizeFontSize(18), color:'#fff'}}>{getUndercareName()}</Text>
</View>
</View>
)
}
}
The back button is not correctly aligned with Notification centre title :/

You can create a custom header component and pass that as an option in order to overwrite the default header.
See this snack for a working example: https://snack.expo.io/#zayco/header-styles_custom
Replace all of the old header options with header
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
header: () => renderHeader()
}}
/>
</Stack.Navigator>
</NavigationContainer>
Add the function to render the custom header
const renderHeader = () => (
<View style={styles.header}>
<View style={styles.headerTop}>
<View style={styles.headerLeft}>
<Text>Back</Text>
</View>
<View style={styles.headerCenter}>
<Text style={styles.headerTitle}>Notification Center</Text>
</View>
<View style={styles.headerRight} />
</View>
<View style={styles.subHeader}>
<View style={styles.subHeaderLeft}>
<Text>ICON</Text>
</View>
<View style={styles.subHeaderCenter}>
<Text style={styles.subHeaderName}>CHUI, Tai Hung</Text>
</View>
</View>
</View>
)
Add the styles used by the custom header. You can play around with the styles to fit your needs.
const styles = {
header: {
flex: 0,
backgroundColor: 'green',
marginTop: Platform.OS == "ios" ? 20 : 0, // only for IOS to give StatusBar Space
padding: 10,
},
headerTop: {
flexDirection: 'row',
},
headerLeft: {
flex: 1,
backgroundColor: 'red',
justifyContent: 'center',
},
headerCenter: {
flex: 6,
alignItems: 'center',
},
headerTitle: {
fontSize: 18,
color: 'white',
fontWeight: 'bold',
},
headerRight: {
flex: 1,
},
subHeader: {
flexDirection: 'row',
paddingTop: 10,
},
subHeaderLeft: {
backgroundColor: 'yellow',
padding: 5,
},
subHeaderCenter: {
justifyContent: 'center',
alignItems: 'center',
},
subHeaderName: {
color: 'white',
marginLeft: 10,
}
}

instead of using title use headerTitle in which you can add a component instead of a string.
static navigationOptions = ({ navigation }) => {
return {
headerTitle: () =>
<View>
<Text>{localizedTitle()}</Text>
<Text>subtitle</Text>
</View>,
headerTintColor: '#fff',
headerStyle: {
backgroundColor: isUndercareMode() ? getUndercareColor() : 'rgb(255,0,0)'
},
headerTitleStyle: {
fontWeight: 'bold',
textAlign: 'center',
fontSize: normalizeFontSize(18),
flex: 1
},
headerLeft: <BackButton
accessible={false}
testID='LeftButton'
accessibilityLabel="headerLeftButton"
/>,
headerRight: (<View></View>),
}
}

React functional bases props is not defined

i need your helps.
I have a functional based component call WelcomeSlidePage. I want to pass a functional to the functional component. i try to console.log the function in functional component, in the first state, console.log is printing the function, but after the second state, it's becomes undefine.
this is my component that calling the functional component
WebViewPage.jsx
<Modal transparent={true} visible={this.state.WelcomeSlidePageModal} animationType="
<WelcomeSlidePage onDone={()=>{console.log('test bro');this.setState({WelcomeSlidePageModal:false})}}/>
</Modal>
and this is my functional component
WelcomeSlidePage.jsx
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import string from '../string'
import { _storeData, _getData } from '../components/StoreAsync';
export default WelcomeSlide = (props) => {
const [language, setLanguage] = useState('english');
const [showRealApp, setShowRealApp] = useState(false);
const welcomeSlide = string.welcome_slide[language]
useEffect(() => {
console.log('testing bro',props.onDone)
// getData();
});
async function getData() {
setLanguage( await _getData("language"));
setShowRealApp( await _getData("showRealApp"));
}
_renderItem = ({ item }) => {
switch (item.key) {
case ('k4'):
return (
<View style={{backgroundColor : '#a0c83a', flex: 1}}>
<Text style={styles.title}>{item.title}</Text>
<View style={{justifyContent: 'center', paddingHorizontal: 20, flex: 1}}>
<Text style={styles.text}>{item.text_4_a}</Text>
<View style={{flexDirection: 'row'}}>
<Image style={styles.icon} source={item.icon} />
<Text style={{paddingStart: 5, paddingEnd: 20, ...styles.text}}>{item.text_4_b}</Text>
</View>
<Text style={styles.text}>{item.text_4_c}</Text>
<View style={{flexDirection: 'row'}}>
<Image style={styles.icon} source={item.icon} />
<Text style={{paddingStart: 5, paddingEnd: 20, ...styles.text}}>{item.text_4_d}</Text>
</View>
</View>
</View>
);
case ('k5'):
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.text_5}</Text>
<TouchableOpacity style={{marginVertical: 24}} onPress={()=>{ props.navigation.navigate('WebView', { url: string.onboarding[language].login_url }); }}>
<Text style={styles.button}>{item.text_5_btn1}</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginVertical: 24}} onPress={()=>{ props.navigation.navigate('WebView', { url: string.onboarding[language].register_url }); }}>
<Text style={styles.button}>{item.text_5_btn2}</Text>
</TouchableOpacity>
</View>
);
default:
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.title}</Text>
<Image style={styles.image} source={item.image} />
<Text style={{paddingHorizontal: 20, ...styles.text}}>{item.text}</Text>
</View>
);
}
}
_onDone = () => {
setShowRealApp(true);
_storeData('isPassSlide',true);
props.navigation.navigate('WebView', { url: string.onboarding[language].login_url,splashScreen:false });
}
const slides = [
{
key: 'k1',
title: welcomeSlide.title,
text: welcomeSlide.a,
image: require('../images/my_library_card_white_notext_nopadding.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k2',
title: welcomeSlide.title,
text: welcomeSlide.b,
image: require('../images/my_account_white_notext_nopadding.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k3',
title: welcomeSlide.title,
text: welcomeSlide.c,
image: require('../images/library_catalog_white_notext_nopadding.png'),
backgroundColor:'#a0c83a',
},
{
key: 'k4',
title: welcomeSlide.title,
text_4_a: welcomeSlide.d_a,
text_4_b: welcomeSlide.d_b,
text_4_c: welcomeSlide.d_c,
text_4_d: welcomeSlide.d_d,
icon: require('../images/icon-hand-right.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k5',
text_5: welcomeSlide.e,
text_5_btn1: welcomeSlide.e_btn1,
text_5_btn2: welcomeSlide.e_btn2,
backgroundColor:'#a0c83a',
},
];
return(
<AppIntroSlider
renderItem={_renderItem}
prevLabel={string.back[language]}
nextLabel={string.next[language]}
doneLabel={string.next[language]}
showPrevButton={true}
slides={slides}
onDone={()=>props.onDone()}/>
)
}
const styles = StyleSheet.create({
slide : {
flex: 1,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
paddingBottom: 80,
backgroundColor : '#a0c83a',
alignItems: 'center',
},
title: {
fontSize: 24,
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
marginTop : 30,
},
text: {
fontSize : 20,
color: '#fff',
textAlign: 'left',
},
image: {
width: 200,
height: 200,
resizeMode: 'contain',
flex:1,
},
icon: {
top: 10,
width: 25,
height: 15,
width: 25,
marginTop: -3,
},
content: {
paddingHorizontal: 20,
},
button: {
borderRadius: 8,
paddingVertical: 12,
paddingHorizontal: 12,
color: 'white',
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
marginHorizontal: 40,
backgroundColor: '#e46825',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
},
});
and then this is the console log
testing bro function onDone() {
console.log('test bro');
_this2.setState({
WelcomeSlidePageModal: false
});
} b11b05fa-4e76-41da-9d58-218edc178e45:157683:15
testing bro undefined
please help me guys, thanks

react-native-modalbox stuck in child component context

I'm using react-native-modalbox. Judging by the dark shaded area in the image below, my model is stuck in the context of the component that it is inside. Not the whole app. Is there a way to make the modal think it is at the root component level? I have tried zIndex:500 which doesn't work.
modal:
code:
let Categories = (props) => (
<View style={styles.formItem}>
<List style={styles.list} dataArray={props.categories}
renderRow={(item) =>
<ListItem icon onPress={() => props.toggleShowSubcategories(item)}>
<Left>
<Icon
style={styles.icon}
name={item.icon}
size={20}
color={item.iconColor} />
</Left>
<Body>
<Text style={styles.label}>{item.label}</Text>
</Body>
<Right>
<Icon style={styles.arrow} name="angle-right" size={20} />
</Right>
</ListItem>
}>
</List>
<Modal
style={[styles.modal, styles.modal3]}
position={'center'}
isOpen={props.categories.some(x => showModal(x))}>
<Text style={styles.text}>Modal centered</Text>
<Button
onPress={() => props.setAllShowSubcategoriesToFalse()}
style={styles.btn}><Text>Close</Text></Button>
</Modal>
</View>
)
Categories.propTypes = {
categories: React.PropTypes.array.isRequired,
toggleSubcategory: React.PropTypes.func.isRequired,
toggleShowSubcategories: React.PropTypes.func.isRequired,
setAllShowSubcategoriesToFalse: React.PropTypes.func.isRequired
}
Categories = connect(
mapStateToProps,
mapDispatchToProps
)(Categories)
export default Categories
const styles = {
list: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 8
},
label: {
color: '#9E9E9E',
fontWeight: '200'
},
formItem: {
marginBottom: 10
},
icon: {
width: 30
},
header: {
backgroundColor: '#F7F7F7',
},
arrow: {
color: '#9E9E9E'
},
modalView: {
flex: 1,
backgroundColor: '#FFFFFF',
borderRadius: 8,
},
title: {
color: '#9E9E9E',
fontWeight: '200'
},
wrapper: {
paddingTop: 50,
flex: 1
},
modal: {
justifyContent: 'center',
alignItems: 'center',
zIndex: 500
},
modal3: {
height: 500,
width: 300,
backgroundColor: 'red',
zIndex: 500
},
btn: {
margin: 10,
backgroundColor: '#3B5998',
color: 'white',
padding: 10
},
btnModal: {
position: 'absolute',
top: 0,
right: 0,
width: 50,
height: 50,
backgroundColor: 'transparent'
},
text: {
color: 'black',
fontSize: 22
}
}

The parent view has the style 'formItem' who's only styling is 'marginBottom:10'. There's nothing telling that view to fill the entire screen so it is sized to fit its children. Give the view the 'absoluteFill' style so that if fills the screen https://til.hashrocket.com/posts/202dfcb6c4-absolute-fill-component-in-react-native