I am passing a function to my MapComponent: type Props = { results: SearchResult[]; … onDirectionsPress: ( latitude: number, longitude: number, sitename: string, ) => void; }; const MapTab = ({ results, fuelType, searchDistance, addressName, onDirectionsPress, }: Props) => ( <View style={styles.container}> … <MapComponent results={results} {…onDirectionsPress} /> </View> ); In my MapComponent, it is appearing… Read More function is missing in type but required in type 'Props'

I am making my custom components that wrap react-native components. I am currently making MyInput component. It uses TextInput component.I want to know state of TextInput component, but i dont want to use onFocus or onBlur etc. I am trying to pass all of those props trough. I am currently trying with using refs, but… Read More React Get state of native elemet

How to make this all Stack Screen having just 1 styling, because all of them are having a same style. As you can see. Options Props having a headerStyle, headerTitleStyle, headerLeft, headerTitleAlign have a same value. This is my file App.js const MainNavigator = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName="MainScreen"> <Stack.Screen name="MagicScreen" component={MagicScreen}… Read More React-native StackScreen. How to use same styling for all those StackScreen?

I am programmatically clearing the TextInput’s value via .clear() method. I also subscribed my state to onChangeText but on .clear() invocation, my state doesn’t change. Why .clear() doesn’t trigger onChangeText? Isn’t it changing the text value? Example: function MyComponent() { const [value, setValue] = useState(""); const ref = useRef(); const handlePress = () => {… Read More Why TextInput's `.clear()` doesn't trigger `onChangeText` callback?

I am listing products by using FlatList in the app. I have Products.js, ProductCard.js. Products.js: const Products = ({navigation}) => { const renderItem = ({item}) => ( <ProductCard item={item} onClickHandler={() => navigation.navigate(‘Item Detail’, {item: item})} /> ); return ( <View> <ProductOperations /> <FlatList data={data} keyExtractor={item => item.id.toString()} renderItem={renderItem} /> </View> ); }; export default Products;… Read More React Native – Warning: Each child in a list should have a unique "key" prop

I am using 2 arrays and rendering it as parent and child map function Array : const array1 = [{id: 1,message: "apple",},{id: 2,message: "banana",},{id: 3,message: "cherry",},]; const array2 = [{id: 4,reply: "mango",},{id: 5,reply: "grape",},{id: 6,reply: "kiwi",},]; Now when I render these arrays as parent and child and in onChange function in radio button i get… Read More React Js child map function returns only first parent map function value but not others on using input type radio

This is the code that is giving me this error and I cannot find a solution: { hasTracked ? null : <TouchableOpacity style={styles.button}> <Text style={styles.buttonText}>Track data</Text> </TouchableOpacity> } >Solution : Try this: {!hasTracked && < Pressable style={styles.button}> <Text style={styles.buttonText}>Track data</Text> </Pressable > } Here is an example

import React, {useEffect} from "react"; import {NavigationContainer} from ‘@react-navigation/native’; import {createNativeStackNavigator} from ‘@react-navigation/native-stack’; const Stack = createNativeStackNavigator(); import { Text, Button, View, Image, StyleSheet, ImageBackground } from "react-native"; const Page1 = ({navigation}) => { return ( <View> <ImageBackground style={{width: ‘100%’, height: ‘100%’}} source={require(‘./assets/splash.png’)}> <Text>Page1</Text> <Button title="Go to page 2" onPress={() => navigation.navigate(‘Page2’, {name: ‘Page2’})} />… Read More How to add background image for a few react native pages

I’m using React Native and I got errors when I use JavaScript functions like this: const User = ({navigation, route}) => { //SIGN OUT function signOutHandler() { signOut(auth) .then(() => { console.log(‘user signed out’) navigation.navigate(‘SignIn’) }) .catch(err => { // console.log(err.message) }) } let label = route.params.name label.toString().charAt(0).toUppercase(); console.log(label) return ( <View style={styles.userContainer}> <View style={styles.bio}>… Read More TypeError: undefined is not an object (evaluating 'label.toString')

How come whenever I move from a screen to another screen, my button get automatically pressed straight away without me even pressing on it. My code (Review screen) import { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity, Button } from ‘react-native’ import React , {useEffect, useState} from ‘react’ import {ref, onValue} from ‘firebase/database’ import {db} from… Read More Button activating by itself in react native expo