Develop Reference

(React Native) Undefined is not an object (evaluating 'navigation.navigate')

From App.js, I declare the "FollowingScreen", which is made of a module that exports "Following"
export const FollowingScreen = ({route, navigation}) => {
return (
<ScrollView style={styles.scrollView}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: "#262423" }}>
<Following />
</View>
</ScrollView>
);
}
"Following" is exported by a file called "following.js". From "following.js" I want to navigate to ProfileScreen:
import { useNavigation } from '#react-navigation/native';
class Following extends Component {
...
...
renderItem = ({item}, navigation) => (
<ListItem bottomDivider>
<ListItem.Content style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<ListItem.Title>{item.title}</ListItem.Title>
<TouchableOpacity
onPress={() => navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})}
style={{ flexDirection: 'row'}}
>
<Image
style={{ borderRadius: 50 }}
source={{ uri: item.probability, width: 48, height: 48 }}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={() => navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})}
style={{ flexDirection: 'row'}}
>
<ListItem.Subtitle style={{color: '#000'}}>
<Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.name} {item.surname}</Text>
{"\n"}
<Text style={{fontFamily: 'Montserrat_600SemiBold' }}>#{item.country_id}</Text>
{"\n"}
{"\n"}
<Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.followers}</Text>
{"\n"}
<Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.total}</Text> Total
</ListItem.Subtitle>
</TouchableOpacity>
<Button
buttonStyle={{backgroundColor: "#a6aba7", padding: 9, textAlign: "right", borderRadius: 10, display: item.isFollowing=="Same user" ? "none" : "flex"}}
title={item.isFollowing}
onPress={() => {
if(item.isFollowing=="Follow"){
this.follow(item.id_user);
}
else if(item.isFollowing=="Unfollow"){
this.unfollow(item.id_user);
}
else if(item.isFollowing=="Same user"){
//alert("Same user");
}
}}
/>
</ListItem.Content>
</ListItem>
);
}
unfortunately, I get "undefined is not an object (evaluating 'navigation.navigate')"

You are not passing navigation as a prop to the Following component so change your FollowingScreen component likewise :
export const FollowingScreen = ({route, navigation}) => {
{/** Rest Of Code **/}
<Following navigation={navigation}/>
{/** Rest of Code **/}
}
Then in Following class use this.props.navigation.navigate(....).

You need to declare "navigation" before calling it:
const navigation = useNavigation();
right before
renderItem = (...)

IOS expo-camera preview remains black screen

Expected Behavior : In IOS StandAlone app making expo-camera preview not black screen.
Some things to add: I have in app.json the infoPlist the NSCameraUsageDescription-
I ask the user to allow the use of camera, when this pops the screen is blank and when he accepts the preview remains black
When testing this on Dev ( expo app ) it works perfectly
When testing on expo build and open the app on expo app it works too
when i eas build and sent do app store connect , in testflight or in standalone app it doesnt work!
expo-camera version : "expo-camera": "~12.2.0",
Example
return (
{previewVisible && capturedImage ? (
) : (
<Camera style={styles.camera}
type={type}
ref={camera}
flashMode={'auto'}
whiteBalance={"sunny"}
>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'flex-end' }} >
<LinearGradient style={[{ padding: 15, elevation: 10, paddingBottom: 25 }]} colors={['transparent', 'black']}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }} >
<TouchableOpacity onPress={voltarEcraAnterior} style={[styles.previewButtons, styles.circle]}>
<Icon name="icon-cross" style={styles.iconButtonsCamera} size={40}></Icon>
</TouchableOpacity>
<TouchableOpacity onPress={takePicture} style={[styles.previewButtons, styles.circle,]}>
<Icon name="icon-scan" style={styles.iconButtonsCamera} size={40}></Icon>
</TouchableOpacity>
</View>
</LinearGradient>
</View>
</Camera>
)
}
</View >
);
Permissions
const __startCamera = async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
}

Different content on React Native based on condition

on my react-native app I would like to have premium content for people who paid a subscription.
My issue is how I make the content to display as unavailable(if you are not premium ) and the same as the other content if you are premium. Basically I would like the premium content to be displayed with a "lock overlay" on it for non-premium users.
However, I do not know how I set this conditional. It is a matter of state? If yes where should be positioned this state considering that is unidirectional?
Just to be clear I will have premium and non premium content
class Browser extends Component {
scrollX = new Animated.Value(0);
renderRecommended = () => {
return (
<View style={[styles.flex, styles.column, styles.recommended]}>
<View style={[styles.row, styles.recommendedHeader]}>
<Text
style={{
fontSize: theme.sizes.font * 1.4,
alignSelf: 'center',
color: 'white',
fontFamily: 'Nunito-Bold',
}}>
Recommended
</Text>
</View>
<View style={[styles.column, styles.recommendedList]}>
<FlatList
horizontal
scrollEnabled
showsHorizontalScrollIndicator={false}
scrollEventThrottle={16}
snapToAlignment="center"
style={[styles.shadow, {overflow: 'visible'}]}
data={this.props.destinations}
keyExtractor={(item, index) => `${item.id}`}
renderItem={({item, index}) =>
this.renderRecommendation(item, index)
}
/>
</View>
</View>
);
};
renderRecommendation = (item, index) => {
const {destinations} = this.props;
const isLastItem = index === destinations.length - 1;
const {navigation} = this.props;
return (
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate('PreScreen', {
item,
})
}>
<View
style={[
styles.flex,
styles.column,
styles.recommendation,
styles.shadow,
index === 0 ? {marginLeft: theme.sizes.margin} : null,
isLastItem ? {marginRight: theme.sizes.margin / 2} : null,
]}>
<ImageBackground
style={[styles.imageback]}
source={{uri: item.preview}}
/>
</View>
<View
style={[
index === 0 ? {marginLeft: theme.sizes.margin - 10} : null,
isLastItem ? {marginRight: theme.sizes.margin / 2} : null,
]}>
<Text
style={{
fontSize: theme.sizes.font * 1.25,
fontWeight: '200',
color: 'white',
marginLeft: 10,
//paddingBottom: 20,
fontFamily: 'Nunito-Bold',
}}>
{item.title}
</Text>
<Text
style={{
color: theme.colors.caption,
marginLeft: 10,
fontFamily: 'Nunito-SemiBold',
}}>
{item.location}
</Text>
</View>
</TouchableOpacity>
);
};
render() {
return (
<ScrollView style={styles.container}>
<BackgroundSvg style={styles.background} />
<ScrollView
style={styles.contentContainer}
showsVerticalScrollIndicator={false}
contentContainerStyle={{paddingBottom: theme.sizes.paddin}}>
{this.renderRecommended()}
{this.renderRecommended2()}
{/* <View style={styles.mainContainerView}>
<TouchableOpacity style={styles.singInButton} gradient>
<Text style={styles.logInText}>
Activate premium subscription
</Text>
</TouchableOpacity>
</View> */}
</ScrollView>
</ScrollView>
);
}
}
Browser.defaultProps = {
destinations: mocks,
reading: readingList,
};
export default Browser;
My code is the one on the top. Just to simplify I am accesing some elements from JSON and I am creating Flatlist based on this. What I want is is to give some of the JSON files a bolean with premium or not and in this way to make some elements available for user or not.

As part of your destinations array, for each object, you can specify a boolean field called isPremiumItem. Your users should have a boolean field like isPremiumUser to show the type of their subscription.
Then in renderRecommended method you can check the user subscription status (isPremiumUser), and also the specific item status (isPremiumItem). Then you can render accordingly.

How to pass changing state prop to component?

I have a state object called isEdit.
And I have a list of StyledLessons (a component with functionallity that should differ if its in Edit Mode or not).
<StyledLesson title={title} subjectName={subjectName} subtitle={subtitle} isEdit={this.state.isEdit}/>
It's working fine with the default state (so I do see the expected result in the beginning if isEdit is true or false as expected) but the content doesn't change if I change my state in the parent object.
Any ideas how I could manage the child component to change on the fly?
Here is how I change my state:
this.state.isEdit ?
<Icon
name='check'
color={Colors.tabBarText}
onPress={() => this.setState({isEdit: false})}
/>
:
<Icon
name='edit'
color={Colors.tabBarText}
onPress={() => this.setState({isEdit: true})}
/>
Code of the child component:
class StyledLesson extends React.PureComponent {
constructor(props) {
super(props);
this.isEdit = props.isEdit??true;
this.state = {expanded: false};
}
getEditableView() {
return (
<View style={{flexDirection: 'row', flex: 1, alignItems: 'center', marginHorizontal: 10}}>
<TouchableOpacity>
<Icon
name={'remove-circle'}
color={'#f00'}
/>
</TouchableOpacity>
<TouchableOpacity style={{flex: 1}}>
<FlatCard>
<Text style={{color: '#666', fontSize: 18}}>{this.props.title}</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: 35,
color: Colors.textColor
}}>{this.props.subjectName}</Text>
<Text style={{color: '#666', fontSize: 18}}>{this.props.subtitle}</Text>
</FlatCard>
</TouchableOpacity>
</View>
);
}
getDisplayView() {
return (
//Normal View
<View style={{flexDirection: 'row', flex: 1, alignItems: 'center', marginHorizontal: 10}}>
<TouchableOpacity
onPress={
() => {
this.setState({expanded: !this.state.expanded});
}
}
style={{flex: 1}}
>
<FlatCard>
{this.state.expanded &&
<Text style={{color: '#666', fontSize: 18}}>{this.props.title}</Text>
}
<Text
style={{
fontWeight: 'bold',
fontSize: 35,
color: Colors.textColor
}}>{this.props.subjectName}</Text>
{this.state.expanded &&
<Text style={{color: '#666', fontSize: 18}}>{this.props.subtitle}</Text>
}
</FlatCard>
</TouchableOpacity>
</View>
);
}
render() {
return (
this.isEdit ? this.getEditableView() : this.getDisplayView()
);
}
}
export default StyledLesson;

this.isEdit = props.isEdit??true;
This is the issue. You are updating this property only inside the constructor. Event if the props value is changing, the property won't.
You can try to modify your render method to something like
render() {
return (
(this.props.isEdit??true) ? this.getEditableView() : this.getDisplayView()
);
}

Created a React Native app but it looking good at 6 Inch screen but its not good at 4.3 inch

I have developed a react native app by which its Ui usies react native elements library and uses react-native-size-matter for elements resizing for different screen. So i changed all absolute values to react-size-matter values.
So, the Ui looks awesome in 5.5 inches and 6 + inches, but recently checked in 4.3 Inch screen, in this, the vertical dimensions are getting overflowed over the screen size.
Here is the pic of 4.3 Inch screen :
Check the bottom of the screen, as react-native-element button crosses the screen.
And but when testing in 6 inch screen ( i used this to create the app ), check the image the buttons are sitting at correct place.
What makes this issues ? As, i double checked the code every absolute value has been changed. but still i see this prob. Is this prob by react-native elements or my code ?
As , when i set the height to the card , its shrinking but the words and button is not shrinking. But all the contents are clubbed inside the card only.
Here is my entire code.
import React, { Component } from 'react';
import { View, Image, Dimensions } from 'react-native';
import { connect } from 'react-redux';
import { oneDayPlanSelected, monthlyPlanSelected } from '../../actions';
import { Text, Button, Card } from 'react-native-elements';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-
native-responsive-screen';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import { fontScale } from '../Scalling';
class PlanSelection extends Component {
onMonthlyPlanButtonPressed() {
this.props.monthlyPlanSelected();
}
onOneDayPlanButtonPressed(){
this.props.oneDayPlanSelected();
}
render () {
const cowMilk = require('../../Images/cow_plan.png');
const buffaloMilk = require('../../Images/buffalo_plan.png');
return (
<View style={styles.containerStyle}>
<View style={styles.topContainerStyle}>
<View style={styles.topBlueBoxContainer}>
<Text h4 style={styles.introTextStyle}>
Now, Choose how you wish to buy ? We have two plans.
</Text>
<View style={styles.imageContainerStyle}>
<Image
source={ this.props.milkType === 'Cow Milk' ? cowMilk : buffaloMilk }
style={styles.topContainerImageStyle}
resizeMode='contain'
resizeMethod='scale'
/>
<View style={styles.choosePlanTextContainerStyle}>
<Text h4 style={styles.choosePlanTextStyle}>
Choose your plan.
</Text>
</View>
</View>
<View style={styles.noteContainerStyle}>
<Text style={styles.noteTextStyle}>We are excited ! Kindly select any one plan, and note that Monthly plan has various sub plans. For more info kindly choose the plan. </Text>
</View>
</View>
</View>
<View style={{flexDirection:'row', justifyContent: 'space-evenly'}}>
<View>
<Card
containerStyle={{borderRadius: 5, width: scale(150)}}
>
<View style={{ alignItems: 'center' }}>
<View style={{flexDirection: 'row'}}>
<Text style={styles.planNumberTextStyle}>1</Text>
<Text style={{ fontSize: fontScale(9.5), top: verticalScale(40), fontWeight: 'bold' }}>Day</Text>
</View>
<View style={{ paddingTop: verticalScale(2.5), paddingBottom: verticalScale(2.5), paddingLeft: scale(2.5), paddingLeft: scale(2.5) }}>
<Text style={styles.planDescpStyle}>Buy One day plan, by which we will deliver Cow Milk by Today.</Text>
</View>
<View style={{ paddingTop: verticalScale(13), paddingBottom: verticalScale(13), paddingLeft: scale(13), paddingLeft: scale(13) }}>
<Text style={styles.planNameTextStyle}>One Day Plan</Text>
</View>
<View style={{ width: scale(120), }}>
<Button
backgroundColor='#2980b9'
rightIcon={{name: 'arrow-forward'}}
title='Buy'
raised
onPress={this.onOneDayPlanButtonPressed.bind(this)}
/>
</View>
</View>
</Card>
</View>
<View>
<Card
containerStyle={{borderRadius: 5, width: scale(150) }}
>
<View style={{ alignItems: 'center' }}>
<View style={{flexDirection: 'row'}}>
<Text style={styles.planNumberTextStyle}>30</Text>
<Text style={{ fontSize: fontScale(9.5), top: verticalScale(40), fontWeight: 'bold' }}>Day's</Text>
</View>
<View style={{ paddingTop: verticalScale(2.5), paddingBottom: verticalScale(2.5), paddingLeft: scale(2.5), paddingLeft: scale(2.5) }}>
<Text style={styles.planDescpStyle}>We have various monthly plans, Check for more</Text>
</View>
<View style={{ paddingTop: verticalScale(13), paddingBottom: verticalScale(13), paddingLeft: scale(13), paddingLeft: scale(13) }}>
<Text style={styles.planNameTextStyle}>Monthly Plan</Text>
</View>
<View style={{ width: scale(120), flex: 1, }}>
<Button
backgroundColor='#2980b9'
rightIcon={{name: 'arrow-forward'}}
title='Buy'
raised
onPress={this.onMonthlyPlanButtonPressed.bind(this)}
/>
</View>
</View>
</Card>
</View>
</View>
</View>
);
}
}
const styles = {
containerStyle: {
flex: 1,
overflow: 'scroll'
},
topBlueBoxContainer:{
backgroundColor: '#f0ffff',
height: verticalScale(400),
justifyContent: 'space-evenly',
},
imageContainerStyle: {
alignSelf: 'center'
},
topContainerImageStyle: {
resizeMode: 'contain',
height: verticalScale(230)
},
introTextStyle: {
fontSize: fontScale(17.5),
paddingLeft: scale(40),
},
choosePlanTextStyle: {
fontSize: fontScale(20)
},
choosePlanTextContainerStyle:{
alignSelf: 'center',
},
planNameTextStyle: {
fontSize: fontScale(12),
fontWeight: 'bold'
},
planNumberTextStyle: {
fontSize: fontScale(50),
fontWeight: 'bold',
color: '#37BBE1',
},
planDescpStyle: {
fontSize: fontScale(12),
textAlign: 'center'
},
noteTextStyle: {
fontSize: fontScale(9),
color: '#b2bec3'
},
noteContainerStyle: {
paddingLeft: scale(12),
paddingRight: scale(8),
}
};
const mapStateToProps = state => {
return {
milkType: state.order.milktype
};
};
export default connect(mapStateToProps,
{oneDayPlanSelected,monthlyPlanSelected})(PlanSelection);
Is my codes are correct ? I hope , i did everything correct as of now ! please guide if any mistakes in this. Expected solution, is that my ui should resize according to screen size.