I would like to have a semi-circle as you can see on the right side of the screenshot ( Android ). However, the result looks differently on iOS. Looks like borderTopStartRadius and borderTopEndRadius work differently depending on the platform. The style class is quite simlple and is applied on View component: logo_semiCircle: { width: 150,… Read More React Native: borderTopLeft(Right)Radius behave differently on iOS and Android

I have a service that returns user data: export const AccountRequest = async () => { const token = await retrieveToken(); try { if (token) { const response = await fetch("http://192.168.1.65:8000/api/user/me/", { method: "GET", headers: { Authorization: `Token ${token}`, "Content-Type": "application/json", }, }); console.log(response); return await response.json(); } else { throw new Error(token); } }… Read More How to retrieve data from useEffect with react native?

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