react-native-modalbox stuck in child component context - javascript

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

Related

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;

Center element horizontally in React Native

I want to center a button horizontally, this is my code:
return (
<View style={styles.root}>
<View style={styles.container}>
<SafeAreaView style={HEADER}>
<SliderBox
style={{ height: '100%' }}
currentImageEmitter={index => setCurrentSliderNumber(index)}
images={data.images}>
</SliderBox>
</SafeAreaView>
{currentSliderNumber == data.images.length - 1 ? <View style={styles.item}>
<Button
style={styles.getStartedButton}
appearance="ghost"
status="control"
onPress={onGetStartedPressed}
>
Get Started
</Button>
</View> : null}
</View>
</View>
)
and this is my styling:
const styles = StyleSheet.create({
forgotPasswordButton: {
paddingHorizontal: 0,
},
root: {
flex: 1,
height: '100%',
backgroundColor: '#fff'
},
container: {
borderColor: 'rgba(0,0,0,0.2)',
},
getStartedButton: {
marginVertical: 12,
backgroundColor: 'red'
},
item: {
borderColor: 'rgba(0,0,0,0.2)',
position: 'absolute',
top: '80%',
left: '50%'
}, text: {
position: 'absolute',
top: '30%',
left: '10%'
}
})
I also tried to add alingnItems:center to root:
root: {
flex: 1,
height: '100%',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}
But the result is not the one expected:
Try changing the item style object to this:
item: {
borderColor: 'rgba(0,0,0,0.2)',
position: 'absolute',
top: '80%',
left:0,
width:"100%",
alignItems:"center",
justifyContent:"center"
},
Do not use position until it's necessary you should use flex properties.
return (
<View style={styles.root}>
<View style={styles.container}>
<SafeAreaView style={HEADER}>
<SliderBox
style={{ height: '100%' }}
currentImageEmitter={index => setCurrentSliderNumber(index)}
images={data.images}>
</SliderBox>
</SafeAreaView>
{currentSliderNumber == data.images.length - 1 ? <View style={styles.item}>
<Button
style={styles.getStartedButton}
appearance="ghost"
status="control"
onPress={onGetStartedPressed}
>
Get Started
</Button>
</View> : null}
</View>
</View>
)
Styles
const styles = StyleSheet.create({
forgotPasswordButton: {
paddingHorizontal: 0,
},
root: {
flex: 1,
height: '100%',
backgroundColor: '#fff'
},
container: {
borderColor: 'rgba(0,0,0,0.2)',
flexGrow:1,
justifyContent: "space-between"
},
getStartedButton: {
marginVertical: 12,
backgroundColor: 'red',
alignSelf:"center",
flexGrow:2,
},
item: {
borderColor: 'rgba(0,0,0,0.2)',
flexGrow:1,
justifyContent:"center",
alignItem:"center",
}, text: {
}
})
Check out the layout docs

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

Add Custom createMaterialTopTabNavigator to component?

I have an issue with createMaterialTopTabNavigator,
I'm already declaring an AppContainer in my Route.js File,
the error goes away if create a separate AppContainer for a TobTab in a screen I want to add these Tob Tabs in
like this
const Root = createAppContainer(NavTabs);
so I made a specific file contained a Tabs "NavTabs.js"
import { createMaterialTopTabNavigator } from "react-navigation";
import AboutScreen from "./About";
import GalaryScreen from "./Galary";
import ReviewsScreen from "./Reviews";
const NavTabs = createMaterialTopTabNavigator(
{
About: { screen: AboutScreen },
Galaty: { screen: GalaryScreen },
Reviews: { screen: ReviewsScreen }
},
{
tabBarOptions: {
activeTintColor: "#fff",
inactiveTintColor: "#ddd",
tabStyle: {
justifyContent: "center"
},
indicatorStyle: {
backgroundColor: "#fcc11e"
},
style: {
backgroundColor: "#347ed8"
}
}
}
);
export default NavTabs;
and in the File navigations "Route.js" I put it in the StackNavigator like this
and here the full File
const HomeStack = createStackNavigator({
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
title: "Home",
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerRight: (
<TouchableOpacity
onPress={() => navigation.navigate("Notifications")}
style={{ margin: 10 }}
>
<Icon name="ios-notifications" size={28} color="#1DA1F2" />
</TouchableOpacity>
),
headerStyle: {
backgroundColor: "#fff",
shadowOpacity: 0,
elevation: 1,
marginBottom: 20
},
headerTintColor: "#14171a",
headerTitleStyle: {
flex: 1,
fontSize: 25,
justifyContent: "center"
}
})
},
MapScreen: {
screen: MapScreen,
navigationOptions: {
title: "Map",
headerRight: <View />,
// headerLeft: <View />,
headerStyle: {
backgroundColor: "#fff",
shadowOpacity: 0,
elevation: 1,
marginBottom: 0
},
headerTintColor: "#14171a",
headerTitleStyle: {
flex: 1,
fontSize: 25,
justifyContent: "center"
}
}
},
ProviderProfile: {
screen: ProviderProfile,
navigationOptions: {
headerRight: <View />,
// headerLeft: <View />,
headerStyle: {
backgroundColor: "#fff",
shadowOpacity: 0,
elevation: 1
},
headerTintColor: "#14171a",
headerTitleStyle: {
flex: 1,
fontSize: 25,
justifyContent: "center"
}
}
},
Order: {
screen: Order,
navigationOptions: {
title: "Order",
headerRight: <View />,
// headerLeft: <View />,
headerTintColor: "#fff",
headerStyle: {
backgroundColor: "#fff",
shadowOpacity: 0,
elevation: 1
},
headerTintColor: "#14171a",
headerTitleStyle: {
flex: 1,
fontSize: 25,
justifyContent: "center"
}
}
},
Tabs: NavTabs
});
and when I Import it in my screen " profile"
like this
<View>
<View style={{ flexDirection: "row", marginTop: 10 }}>
<TouchableOpacity
style={{
backgroundColor: "#1567d3",
width: 130,
borderRadius: 100,
justifyContent: "center",
marginRight: 50,
height: 40
}}
onPress={() => alert("Message")}
>
<Text
style={{
textAlign: "center",
color: "#fff",
fontSize: 18,
fontWeight: "300"
}}
>
Message
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
backgroundColor: "#1567d3",
width: 130,
borderRadius: 100,
justifyContent: "center",
height: 40
}}
onPress={() =>
this.props.navigation.navigate("Order", {
providerName,
providerId,
providerService,
gKey,
token,
region
})
}
>
<Text
style={{
textAlign: "center",
color: "#fff",
fontSize: 18,
fontWeight: "300"
}}
>
Send Order
</Text>
</TouchableOpacity>
</View>
<NavTabs />
</View>
I got the error like above, so how to handle this without making the other app container?
cuz when i navigate from Map screen to Profile screen i pass some Params and i want to use these params in the Tabs
this.props.navigation.navigate('ProviderProfile', {
providerId: marker.id,
providerName: marker.name,
providerService: marker.service,
gKey: marker.gKey,
token: marker.token._55,
region: region
})
the result should be like this " as you see i have a name "Loy" i wanna use it in About Tab"

How can I achieve to have active pointy/arrow/triangle tabs on React Native?

It seems to be as if I need to use some extra css in order to achieve what you will see below:
I already have this component:
renderTabBar = props => (
<View style={tabViewStyles.tabBar}>
{props.navigationState.routes.map((route, i) => {
return (
<TouchableOpacity
key={route.key}
style={[
tabViewStyles.tabItem,
tabViewStyles.tabStyle,
tabViewStyles[`tabStyle_${i}`],
]}
onPress={() => this.setState({ index: i })}
>
<Text style={{ color: '#ffffff', fontFamily: 'montserratBold' }}>
{route.title}
</Text>
</TouchableOpacity>
);
})}
</View>
);
With this css on StyleSheet:
container: {
flex: 1,
},
tabBar: {
flexDirection: 'row',
paddingTop: Constants.statusBarHeight,
},
onWhite: {
color: globalStyles.whiteColor.color,
backgroundColor: globalStyles.whiteColor.backgroundColor,
},
bolderFont: {
fontFamily: 'montserratBold',
},
tabItem: {
flex: 1,
alignItems: 'center',
padding: 26,
},
tabStyle: {
marginHorizontal: 10,
marginTop: 20,
borderRadius: 2,
},
tabStyle_0: {
backgroundColor: '#ff5252',
},
tabStyle_1: {
backgroundColor: '#3da7dc',
},
});
With that above I get this:
So I am still missing the pointy part of the tab.
What else do I need to do?
You can use rotate property of Transforms as described here.
Minimal example:
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<View style={{width:50,height:50,backgroundColor:'green'}}></View>
<View style={{transform:[{rotateZ:'45deg'}],width:8,height:8,backgroundColor:'green',marginTop:-4}}></View>
</View>
Snack example here
If you want a pure styled solution and not an image you could do the following:
const triangle = {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: 50,
borderRightWidth: 50,
borderBottomWidth: 100,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#ff5252',
transform: [
{rotate: '180deg'}
]
}
const Triangle = React.createClass({
render: function() {
return (
<View style={[triangle, this.props.style]} />
)
}
})
Modified from https://codedaily.io/tutorials/22/The-Shapes-of-React-Native.

Categories

Resources