I am trying to pass a function to my Pressable component:
const Component = (navigateTo) => {
return (
<View style={styles.container}>
<Pressable onPress={navigateTo}>
I am passing the function:
const navigateToMyCoverScreen = () => {
const screenToNavigate =
userType === "Lite" ? AppRoutes.one.Name : AppRoutes.two.Name;
navigate(screenToNavigate);
};
<Component navigateTo={navigateToMyCoverScreen} />
You Forget to wrap the "navigateTo" curl bracket like this
const Component = ({navigateTo}) => {
return (
<View style={styles.container}>
<Pressable onPress={navigateTo}>
or If u dont want to use curly bracket, use props like this :
const Component = (props) => {
return (
<View style={styles.container}>
<Pressable onPress={props.navigateTo}>
Related
There is example https://reactnative.dev/docs/flatlist
Let's say I want to add button in each flatlist item. All happens inside App.js
const Item = ({ item,.....}) => (
<TouchableOpacity onPress={onPress} style={..}>
<Button title='Go' onPress={() => myFunc('abc')} /> </TouchableOpacity>);
const App = () => {
function myFunc(x){
}
}
I get " ReferenceError: Can't find variable: myFunc "
I solved this by moving Item inside of const App = () => { but I think it might be wrong.
Tell me please, what is the correct way?
You could do something like this:
const App = () => {
const myFunc = (args) => {
// perform your action here.
}
return (
<FlatList
data={[{ title: 'Title Text', key: 'item1' }]}
renderItem={({ item, index, separators }) => (
<TouchableOpacity
key={item.key}
onPress={() => myFunc('abc')}
>
<View style={{ backgroundColor: 'white' }}>
<Text>{item.title}</Text>
</View>
</TouchableOpacity>
)}
/>
)
}
export default App;
Also you do not need to using TouchableOpacity if you are using Button Component already.
And since you are using separate component to render item for FlatList so it can be done as below:
// Considering App as Parent Component
const App = () => {
// Considering Item as separate Component
const Item = ({item, index, separators}) => {
return (
<TouchableOpacity
key={item.key}
onPress={() => myFunc('abc')}
>
<View style={{ backgroundColor: 'white' }}>
<Text>{item.title}</Text>
</View>
</TouchableOpacity>
)
}
const myFunc = (args) => {
// perform your action here.
}
return (
<FlatList
data={[{ title: 'Title Text', key: 'item1' }]}
renderItem={Item}
/>
)
}
export default App;
All code are inside App Component;
I am still new in using React Native and Mobile Apps Development. I tried to copy the code from another tutorial and have little bit of understanding it.
I have Save.js, Feed.js and Details.js. I have successfully retrieved the data from Save.js to Feed.js using FlatList and RenderItem. Now, I want to pass only selected data from Feed.js to Details.js. But I am confused which way to use, whether useNavigation, getParam, withNavigation or anything else? And is there any difference between using Hooks and Class? Btw I'm using Hooks.
Save.js
import { View, TextInput, Image, Button, StyleSheet, TouchableOpacity, Text} from 'react-native'
import { NavigationContainer } from '#react-navigation/native'
export default function Save(props, navigation) {
const [productName, setProductName] = useState("")
const [category, setCategory] = useState("")
return (
<View style={styles.inputView}>
<TextInput
placeholder="Product name..."
onChangeText={(productName) => setProductName(productName)}
/>
</View>
<View style={styles.inputView}>
<TextInput
placeholder="Category..."
onChangeText={(category) => setCategory(category)}
/>
</View>
Feed.js
function Feed(props, navigation) {
const { currentUser, posts } = props;
const { navigate } = useNavigation();
return (
<FlatList
data={posts}
keyExtractor={(item, index) => item.key}
contentContainerStyle={{
padding: 20,
paddingTop: StatusBar.currentHeight || 42,
}}
renderItem={({item, index}) => (
<TouchableOpacity
onPress={() => props.navigation.navigate("Details", {productName: item.productName})}
<View>
<Text>{item.productName}</Text>
<Text>Category : {item.category}</Text>
</View>
/>
)}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser,
posts: store.userState.posts
})
export default connect(mapStateToProps, null)(Feed);
Details.js
export default function Details({ props, navigate, route }) {
const productName = props.navigation.route.params.productName;
const { navigate } = useNavigation();
const productName = useNavigationParam('productName');
return (
<View>
<Text>{productName}</Text>
<Text>{Category}</Text>
</View>
)
}
I am not sure which way to use in Details.js, so I just put all code I have used and tested.
the code bellow will help you and I think you have problem in destructing context this will help you. and remember navigation is an object inside props
Feed.js
function Feed(props) {
const { currentUser, posts, navigation } = props;
return (
<FlatList
data={posts}
keyExtractor={(item, index) => item.key}
contentContainerStyle={{
padding: 20,
paddingTop: StatusBar.currentHeight || 42,
}}
renderItem={({item, index}) => (
<TouchableOpacity
onPress={() => props.navigation.navigate("Details", {productName: item.productName})}
<View>
<Text>{item.productName}</Text>
<Text>Category : {item.category}</Text>
</View>
/>
)}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser,
posts: store.userState.posts
})
export default connect(mapStateToProps, null)(Feed);
in Feed you dont need to use useNavigation() because props argument contain navigation.
Details.js
export default function Details(props) {
const {productName, category} = props.navigation.route.params;
return (
<TouchableOpacity onPress={()=>props.navigation.navigate("Save",{productName, category})}>
<Text>{productName}</Text>
<Text>{Category}</Text>
</TouchableOpacity>
)
}
Can someone help me in figuring out wha is the best way to use setNativeProps in RN?.
In my react function component I did something like this
const AutoComplete = (props) => {
let parentViewRef = null
useEffect(() => {
setTimeout(function(){ console.log(parentViewRef) }, 3000)
},[])
return(
<View
ref={(viewRef) => {
parentViewRef = viewRef
}}
style={styles.modelOpenViewMain}> <View style={styles.modelOpenInputView}>
</View>
</View>
)
}
}
But unfortunately my parentViewRef is coming out to be undefined. Any idea what I could be doing wrong?
If I'm understanding correctly what you're trying to achieve, then you should be using useRef hook.
So your code would look like something like this:
import React, { useRef } from 'react';
const AutoComplete = (props) => {
let parentViewRef = useRef(null);
return(
<View
ref={parentViewRef}
style={styles.modelOpenViewMain}> <View style={styles.modelOpenInputView}>
</View>
</View>
)
}
}
You will then be able to do whatever you want with your ref via its current property, e.g.
parentViewRef.current. ...
Hope this helps!
Try Passing the parentViewRef as an argument to the useEffect method.
const AutoComplete = (props) => {
let parentViewRef = null
useEffect(() => {
console.log(parentViewRef);
}, [parentViewRef]);
return (
<View
ref={(viewRef) => parentViewRef = viewRef}>
<View >
<Text>CONTENT TEXT</Text>
</View>
</View>
)
}
On index.js
...
import ButtonContent from './ButtonContent';
...
class App extends Component {
onAlert() {
alert("Test")
}
render() {
return (
<View>
<ButtonContent/>
</View>
)
}
}
file ButtonContent.js
...
import { withNavigation } from "react-navigation";
...
const ButtonContent = () => (
<TouchableOpacity onPress={() => {
this.onAlert();
}}>
<Text>Alert</Text>
</TouchableOpacity>
);
export default withNavigation(ButtonContent);
Error this.onAlert() is not function. How to fix it?
You need to pass onAlert function to ButtonContent component,
<ButtonContent onAlert={this.onAlert}/>
And then you can call this function using props,
const ButtonContent = (props) => (
<TouchableOpacity onPress={props.onAlert}>
<Text>Alert</Text>
</TouchableOpacity>
);
#ravibagul91 thanks your ideas, I has fixed ok. This is my edited code
file ButtonContent.js
type Props = {
onAlert: Function
};
const ButtonContent = ({ onAlert }: Props): Object => (
<TouchableOpacity onPress={props.onAlert}>
<Text>Alert</Text>
</TouchableOpacity>
);
And index.js
<ButtonContent onAlert={this.onAlert}/>
const Card = (props) => {
return (
<TouchableOpacity onPress={() => this.props.navigation.navigate('Route')}>
...
</TouchableOpacity>
);
};
export default class HorizontalList extends Component {
...
render() {
return (
<FlatList
...
renderItem={({item: rowData}) => {
return (
<Card
thumb_image={rowData.thumb_image}
title={rowData.title}
innerSubTitle={rowData.innerSubTitle}
innerMainTitle={rowData.innerMainTitle}
/>
);
}}
keyExtractor={(item, index) => String(index)}
/>
);
}
}
I want to add a onPress in Card that will open another screen in the app. Constant is declared outside the render and Card is called as a template inside the render function.
Pass navigation to Card
<Card
navigation={this.props.navigation}
thumb_image={rowData.thumb_image}
title={rowData.title}
innerSubTitle={rowData.innerSubTitle}
innerMainTitle={rowData.innerMainTitle}
/>
and use like this:
const Card = (props) => {
return (
<TouchableOpacity onPress={() => props.navigation.navigate('Route')}>
...
</TouchableOpacity>
);
};