I have a scenario in my app which is developed using React Native (0.59), I am trying to download audio files. I want to continue download even after user kills and relaunch it. I am trying with'react-native-background-downloader' package. I am download and play in simulator even after kill and relaunch the app. But not in actual device.Any suggestion would be appreciated.

Here is the code block I am using

let task = RNBackgroundDownloader.download({    id: fileName,    url: fileUrl,    destination: `${RNBackgroundDownloader.directories.documents}/${fileName}`,  }).begin((expectedBytes) => {    console.log(`Going to download ${expectedBytes} bytes!`);  }).progress((percent) => {    console.log(`Downloaded: ${percent * 100}%`);  }).done(() => {    console.log('Download is done!');  }).error((error) => {    console.log('Download canceled due to error: ', error);  });  

Here is my resume task

 let lostTasks = await RNBackgroundDownloader.checkForExistingDownloads();  for (let task of lostTasks) {    console.log(`Task ${task.id} was found!`);    task.progress((percent) => {      console.log(`Re-Downloaded: ${percent * 100}%`);    }).done(() => {      console.log('Re-Downlaod is done!');    }).error((error) => {      console.log('Re-Download canceled due to error: ', error);    });  }

I am able to see Re-Downloaded: 99%, then I am getting error like'Re-Download canceled due to error: ', '“CFNetworkDownload_jtLLac.tmp” couldn’t be moved to “Documents” because either the former doesn’t exist, or the folder containing the latter doesn’t exist.

I am using react navigation version 5.As per the react navigation docs the options props of a screen applies the configuration to that particular screen. For common configuration we use screenOptions, I have used the header property in the options to show custom header in one screen but it is also visible in other screens of the stack in ios.Works fine in Android.

Here is the code

import * as React from 'react';import { View, Text } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';function HomeScreen({navigation}) {  return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text onPress={()=>navigation.navigate('Details')}>Home Screen</Text></View>  );}function DetailsScreen() {  return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text></View>  );}const Stack = createStackNavigator();function App() {  return (<NavigationContainer><Stack.Navigator><Stack.Screen          name="Home"          component={HomeScreen}          options={{ header:props=><View style={{backgroundColor:'red', height:80}} /> }}        /><Stack.Screen          name="Details"          component={DetailsScreen}          options={{ headerShown: false }}        /></Stack.Navigator></NavigationContainer>  );}export default App;

The red header is visible on DetailsScreen also.

I am new to React-Native and having some problems to fetch the api data in the dropdown List.Basically I want to fetch the names from the API and display it in the drop down .For a while i have added to countries .Below is my code for the same.I just want to fetch the name of the employee from the api .

import DropDownPicker from 'react-native-dropdown-picker';export default class ImageScreen extends React.Component {    static navigationOptions = ({ navigation }) => {    return {      title: "Source Listing",      headerStyle: {backgroundColor: "#000"},      headerTitleStyle: {textAlign: "center",flex: 1}     };    };    constructor(props) {     super(props);     this.state = {       loading: true,       dataSource:[]      };    }    componentDidMount(){    fetch("https://jsonplaceholder.typicode.com/users")  // **Api for fetching**    .then(response => response.json())    .then((responseJson)=> {      this.setState({       loading: false,       dataSource: responseJson      })    })    .catch(error=>console.log(error)) //to catch the errors if any    }    FlatListItemSeparator = () => {    return (<View style={{         height: .5,         width:"100%",         backgroundColor:"rgba(0,0,0,0.5)",    }}    />    );    }    renderItem=(data)=><TouchableOpacity style={styles.list}><Text style={styles.lightText}>{data.item.name}</Text><Text style={styles.lightText}>{data.item.email}</Text><Text style={styles.lightText}>{data.item.company.name}</Text></TouchableOpacity>    render(){     if(this.state.loading){      return( <View style={styles.loader}> <ActivityIndicator size="large" color="#0c9"/></View>    )}    return(<View style={styles.container}><ModernHeader title = "Contact us " /><DropDownPicker style = { {alignItems : "center"   , justifyContent :"center"}}  items={[        {label: {data.item.name}, value:  {data.item.name}} **Dropdown list option**    ]}    defaultValue={this.state.country}    containerStyle={{height: 50,width:375}}    style={{backgroundColor: '#fafafa',borderWidth: 4,    borderColor: "#ffa726",    borderRadius: 6,fontSize: 30}}    dropDownStyle={{backgroundColor: '#fafafa'}}    searchable={true}    searchablePlaceholder="Search..."    searchableError="Not Found"    onChangeItem={item => this.setState({        country: item.value    },    console.log(item.value)    )  }     /></View>    )}    }

Any Help is Appreiciated

I'm currently working an Application which use severals Native UI components from packages that we developed.

Development works great, we already find how to develop those component in seperate xCode project and how to link them with our main application.

Problems cames when I wanted to write unit test in my bridge (there is some business logic that I must test). I looked in famous project like react-native-video, react-native-maps, async-storage and didn't find any native unit test. It surprised me a lot. I must have missed something.

Does any one have already write unit iOS test for a bridge ?Do you have any good sources for helping me ?

Thanks for your help !

I am developing a react-native app using expo.

On my signIn screen I do have two TextInputs (with textContentType username and password).I do have multiple places where I'm calling Keyboard.dismiss() (from a wrapping Touchable, from other Buttons etc.) which works fine for most usecases.

My problem is that after I successfully used password autofill on iOS (via fingerprint) first the keyboard hides and reshows automatically (fireing all the usual keyboard events) which looks strange but is acceptable but afterwards the keyboard is no longer reacting to any Keyboard.dismiss() calls untill I focus another TextInput.

There seems to be a similar issue with the "use strong password" keyboard overlay.

Here my versions:

"expo": "^34.0.1","react": "16.8.3","react-dom": "^16.8.6","react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",

Running in the Expo client on iOS 13.2.3

Thank you in advance for any help.

Edit:

I stripped down the problem to the most basic version. The dismiss button works fine untill I use the password autofill on the iOS device.

https://github.com/SebastianRoese/tryouts/tree/master/keyboard-dismiss-problem

import React from 'react'import { View, Button, TextInput, StyleSheet, Keyboard } from 'react-native'const App = () => {    return (<View style={styles.screen}><TextInput style={styles.textinput} textContentType="username" /><TextInput style={styles.textinput} secureTextEntry textContentType="password" /><Button title="Dismiss Keyboard" onPress={() => Keyboard.dismiss()} /></View>    )}const styles = StyleSheet.create({    screen: {        width: '100%',        height: '100%',        paddingVertical: '15%',        backgroundColor: '#1e1e1e',        alignItems: 'center',    },    textinput: {        marginVertical: 10,        padding: 10,        width: '70%',        height: 40,        backgroundColor: '#ababab',    },})export default App

I'm new to xCode, I've my app working on android (using windows) then I have to make a build for ios, after some troubleshooting I'm stuck in this problem, I've this error under 'React-RCCText-framework':

Undefined symbols for architecture x86_64:

"_YGNodeIsDirty", referenced from:

-[RCTBaseTextInputShadowView uiManagerWillPerformMounting] in RCTBaseTextInputShadowView.o

-[RCTTextShadowView uiManagerWillPerformMounting] in RCTTextShadowView.o

"_YGNodeMarkDirty", referenced from:

-[RCTBaseTextInputShadowView dirtyLayout] in RCTBaseTextInputShadowView.o

-[RCTTextShadowView dirtyLayout] in RCTTextShadowView.o

"_YGNodeSetDirtiedFunc", referenced from:

-[RCTBaseTextShadowView insertReactSubview:atIndex:] in RCTBaseTextShadowView.o

-[RCTBaseTextShadowView removeReactSubview:] in RCTBaseTextShadowView.o

"_YGNodeGetContext", referenced from:

_RCTBaseTextInputShadowViewMeasure in RCTBaseTextInputShadowView.o

_RCTTextInputShadowViewBaseline in RCTBaseTextInputShadowView.o

_RCTInlineViewYogaNodeDirtied in RCTBaseTextShadowView.o

_RCTTextShadowViewMeasure in RCTTextShadowView.o

_RCTTextShadowViewBaseline in RCTTextShadowView.o

"_YGNodeSetMeasureFunc", referenced from:

-[RCTBaseTextInputShadowView initWithBridge:] in RCTBaseTextInputShadowView.o

-[RCTTextShadowView initWithBridge:] in RCTTextShadowView.o

"_YGNodeSetBaselineFunc", referenced from:

-[RCTBaseTextInputShadowView initWithBridge:] in RCTBaseTextInputShadowView.o

-[RCTTextShadowView initWithBridge:] in RCTTextShadowView.o

ld: symbol(s) not found for architecture x86_64

clang: error: linker command failed with exit code 1 (use -v to see invocation)

This is my Pod file:

platform :ios, '9.3'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'def add_flipper_pods!(versions = {})  versions['Flipper'] ||= '~> 0.33.1'  versions['DoubleConversion'] ||= '1.1.7'  versions['Flipper-Folly'] ||= '~> 2.1'  versions['Flipper-Glog'] ||= '0.3.6'  versions['Flipper-PeerTalk'] ||= '~> 0.0.4'  versions['Flipper-RSocket'] ||= '~> 1.0'pod 'Firebase/Analytics'  pod 'FlipperKit', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitLayoutPlugin', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/SKIOSNetworkPlugin', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitReactPlugin', versions['Flipper'], :configuration => 'Debug'  # List all transitive dependencies for FlipperKit pods  # to avoid them being linked in Release builds  pod 'Flipper', versions['Flipper'], :configuration => 'Debug'  pod 'Flipper-DoubleConversion', versions['DoubleConversion'], :configuration => 'Debug'  pod 'Flipper-Folly', versions['Flipper-Folly'], :configuration => 'Debug'  pod 'Flipper-Glog', versions['Flipper-Glog'], :configuration => 'Debug'  pod 'Flipper-PeerTalk', versions['Flipper-PeerTalk'], :configuration => 'Debug'  pod 'Flipper-RSocket', versions['Flipper-RSocket'], :configuration => 'Debug'  pod 'FlipperKit/Core', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/CppBridge', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FBCxxFollyDynamicConvert', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FBDefines', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FKPortForwarding', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitHighlightOverlay', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitLayoutTextSearchable', versions['Flipper'], :configuration => 'Debug'  pod 'FlipperKit/FlipperKitNetworkPlugin', versions['Flipper'], :configuration => 'Debug'endpost_install do |installer|add_flipper_pods!  installer.pods_project.targets.each do |target|    if ['RNFBApp'].include?(target.name)      target.add_system_framework(installer.pods_project.targets.find{|target| target.name == 'GoogleUtilities'})target.add_system_framework(installer.pods_project.targets.find{|target| target.name == 'FirebaseAuth'})      target.add_system_framework(installer.pods_project.targets.find{|target| target.name == 'FirebaseAnalytics'})    elsif target.name.eql?('RNFBAnalytics')      target.add_system_framework(installer.pods_project.targets.find{|target| target.name == 'FirebaseAnalytics'})      target.add_system_framework(installer.pods_project.targets.find{|target| target.name == 'GoogleAppMeasurement'})      target.add_system_framework(installer.pods_project.targets.find{|target| target.name == 'nanopb'}) target.add_system_framework(installer.pods_project.targets.find{|target| target.name == 'FirebaseAuth'})      target.add_system_framework(installer.pods_project.targets.find{|target| target.name == 'GoogleUtilities'})    end  endendpod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'# Post Install processing for Flipperdef flipper_post_install(installer)  installer.pods_project.targets.each do |target|    if target.name == 'YogaKit'      target.build_configurations.each do |config|        config.build_settings['SWIFT_VERSION'] = '4.1'      end    end  endendpre_install do |installer|Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}endtarget 'GENUSAPP' do  # Pods for #pod 'react-native-flipper', :path => '../node_modules/react-native-flipper', :configuration => 'Debug'#use_native_modulconfig.js use_frameworks!  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'  pod 'ViroKit', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/'  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"  pod 'React', :path => '../node_modules/react-native/'  pod 'React-Core', :path => '../node_modules/react-native/'  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'pod 'GoogleUtilities' pod 'Firebase/Auth'#pod 'Firebase/Core'pod 'Firebase/Analytics'pod 'GoogleAnalytics'  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'  pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'  target 'GENUSAPPTests' do    inherit! :complete    # Pods for testing  end  use_native_modules!  # Enables Flipper.  #  # Note that if you have use_frameworks! enabled, Flipper will not work and  # you should disable these next few  #add_flipper_pods! # post_install do |installer| #   flipper_post_install(installer) # endend

I am trying to pass data that I pull from a SQLDatabase into another component that would display it. I'm not sure how to do it exactly...

In my App.js

This calls CustomList

import CustomList from './components/FlatList';export default function App() {  return(<CustomList />  );};

which

In my CustomList

import Data from './Data';...export default function CustomList() {    //Sets up Getter , Setter , Initial Data    const [data, setData] = useState(Data);    ...    return (<FlatList             ListHeaderComponent = {header}            data = {data}            keyExtractor = { (item) => (item.id).toString()}            ItemSeparatorComponent = { () => <View style={styles.itemSeparator}></View>}            contentContainerStyle={ {borderBottomColor:'grey', borderBottomWidth: 1} }            renderItem = { ({item, index}) => <ListItem item={item} index={index}/>}       />...

The CustomList above works if I import hard-coded data below

In my Data.js

const Data = [    {id: 1, text: 'Boadb'},    {id: 2, text: 'Joe'},    {id: 3, text: 'Jane'},    {id: 4, text: 'John'},    {id: 5, text: 'Janet'},    {id: 6, text: 'Janet'},    {id: 7, text: 'Janet'},    {id: 8, text: 'Janet'},];export default Data;

However, I want a real-time syncing database that will update the CustomList whenever changes are made.

In my SQLData.js

let helperArray;...export default function SQLData() {     ...     function querySuccess(tx, results) {         ...         helperArray = [];         //Go through each item in dataset         for (let i = 0; i < len; i++) {         let row = results.rows.item(i);         helperArray.push(row);      }    ...    return ();  };

As you can see from the code above, I have put the data pulled from the SQLDatabase into a variable helperArray. I was wondering how do I import it similarly like 'Data.js' and have it output the same way! Thanks

For my requirement is need to access sms which we have in Inbox, is there any framework expose sms to access in iPhone. please suggest me workaround.

I am working with a react native android application in this application I am reading a OTP that is sent from the SMS gateway I am using SMS Read permission the application is working fine but when I am trying to upload it in google play it is rejecting it because of SMS Read permission. I have read about the substitute and that is SMS retrieve API can anyone help me how to implement it in react native.

Is it possible or right to use API in a React Native application for iOS?

I'm trying to implement a nested drawer navigation on a tab screen following a login/signup stack. A problem I'm having is that the drawer can be accessible from both Login/Signup instead of just on the Tab Navigation.

Here is my navigation code:

import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import Login from '../screens/Login.js'import Signup from '../screens/Signup.js'import { createStackNavigator } from '@react-navigation/stack';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { TouchableOpacity } from 'react-native-gesture-handler';import CameraScreen from '../screens/Camera.js'import {Ionicons, EvilIcons} from '@expo/vector-icons'import Home from '../screens/Home.js';import LivingRoom from '../screens/LivingRoom.js'import Activity from '../screens/Activity.js'import Post from '../screens/Post.js'import Profile from '../screens/Profile.js'import CommentScreen from '../screens/Comment.js'import { MaterialIcons } from '@expo/vector-icons';import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';import { useDispatch, useSelector } from "react-redux";import { StyleSheet, Text, View, ImageBackground, Image } from 'react-native';const Drawer = createDrawerNavigator();const Stack = createStackNavigator();const Tab = createBottomTabNavigator();const styles = StyleSheet.create({    container: {        flex: 1    },    profile: {        marginTop: 100,        width: 80,        height: 80,        borderRadius: 40,        borderWidth: 3,        borderColor: "#fff"    },    name: {        color: "#000",        fontSize: 20,        fontWeight: "800",        marginVertical: 8    },});const navigationRef = React.createRef();function navigate(name, params) {    navigationRef.current && navigationRef.current.navigate(name, params);}function TabNavigator() {    return (<Tab.Navigator                screenOptions={({ route }) => ({                    tabBarIcon: ({ color, size, focused }) => {                        if(route.name === "Home"){                            return <Ionicons name="ios-home" size={28}  />                        }                        if(route.name === "Post"){                            return <Ionicons name="ios-add-circle"                                size={32}                                color="#FF6E65"                                style={{                                    shadowColor: "#E9446A",                                    shadowOffset: { width: 0, height: 10 },                                    shadowRadius: 10,                                    shadowOpacity: 0.3                                }}/>                        }                        if(route.name === "Living Room"){                            return <Ionicons name="ios-chatbubbles" size={28} />                        }                    },                })}                tabBarOptions={{                    activeTintColor: "#FF6E65",                    height: 100,                    paddingVertical: 10                }}><Tab.Screen name="Home"  component={Home} /><Tab.Screen name="Post" component={Post} /><Tab.Screen name="Living Room" component={LivingRoom} /></Tab.Navigator>    );}function StackNavigator({ navigation }){    return (<Stack.Navigator                //   initialRouteName="Comment"><Stack.Screen name="Login" component={Login} options={{headerShown: false}} /><Stack.Screen name="Signup" component={Signup} options={{ title: 'Sign up' }}/><Stack.Screen name="TabNavigator" component={TabNavigator} options={{                        title: "Home" ,            headerLeft: () => (<TouchableOpacity onPress={                    () => navigate('Camera')                }><Ionicons style={{marginLeft: 10}} name={'ios-camera'} size={30}/></TouchableOpacity>            ),            gestureEnabled: false,            headerRight: () => (<TouchableOpacity onPress={                    () => navigation.openDrawer()                }><MaterialIcons style={{marginRight: 10}} name={'people'} size={30}/></TouchableOpacity>            ),        }}/><Stack.Screen name="Camera" component={CameraScreen} options={{ headerShown: false }}/><Stack.Screen name="Comment" component={CommentScreen} options={{ headerShown: true }}/></Stack.Navigator>    );}function CustomDrawerContent(props) {    const username = useSelector(state => state.user.username);    const avatar = useSelector(state => state.user.avatar);    return (<DrawerContentScrollView {...props} ><ImageBackground            source={require("../assets/background.png")}            style={{ width: undefined, padding: 16, paddingTop: 48 }}><Image source={{uri: avatar}} style={styles.profile} /><Text style={styles.name}>{username}</Text></ImageBackground><DrawerItemList  {...props} /></DrawerContentScrollView>    );  }function MyDrawer() {    return (<Drawer.Navigator drawerPosition={'right'} drawerStyle={{            backgroundColor: '#fff',          }} drawerContentOptions={{            activeBackgroundColor: '#FF6E65',            activeTintColor: "#FFF",          }} drawerContent={props => <CustomDrawerContent {...props} />}><Drawer.Screen name="Home" component={StackNavigator}  /><Drawer.Screen name="My Profile" component={Profile} /></Drawer.Navigator>    );  }function AuthNavigator() {        // console.log(navigation)        return (<NavigationContainer ref={navigationRef}><MyDrawer/></NavigationContainer>          );}export default (AuthNavigator)

Here is my tab navigation code:

import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import Home from '../screens/Home.js';import Search from '../screens/Search.js'import Activity from '../screens/Activity.js'import Post from '../screens/Post.js'import Profile from '../screens/Profile.js'import {Ionicons} from '@expo/vector-icons'// import { HomeNavigator } from './StackNavigator.js'const Tab = createBottomTabNavigator();export default class TabNavigator extends React.Component {    render(){        return (<Tab.Navigator                    screenOptions={({ route }) => ({                        tabBarIcon: ({ color, size, focused }) => {                            if(route.name === "Home"){                                return <Ionicons name="ios-home" size={32}  />                            }                            if(route.name === "Search"){                                return <Ionicons name="ios-search" size={32} />                            }                            if(route.name === "Post"){                                return <Ionicons name="ios-add-circle-outline" size={32}/>                            }                            if(route.name === "Activity"){                                return <Ionicons name={focused ? "ios-heart" : "ios-heart-empty"} size={32} />                            }                            if(route.name === "Profile"){                                return <Ionicons name="ios-person" size={32} />                            }                        },                    })}                    tabBarOptions={{                        height: 100,                        paddingVertical: 10                    }}><Tab.Screen name="Home"  component={Home} /><Tab.Screen name="Search" component={Search} /><Tab.Screen name="Post" component={Post} /><Tab.Screen name="Activity" component={Activity} /><Tab.Screen name="Profile" component={Profile} /></Tab.Navigator>        );    }}

I've tried setting gestures to false in the login and signup stack screen but that only gets rid of the gesture for the stack screen itself but not the drawer itself. I want it such that the drawer can only be accessible from the tab navigator but React Navigation 5.x says to nest everything under the Drawer itself. How should I go about this? Thanks!

My Code:

import React, { PureComponent } from 'react'import { StyleSheet, View } from 'react-native'import {    isPortrait} from './Constants'export default class TwoVideoView extends PureComponent {    render() {        return (<View style={styles.conatiner}><View style={[styles.videoHalfView, {backgroundColor: 'white'}]}></View><View style={[styles.videoHalfView, {backgroundColor: 'gray'}]}></View></View>        )    }}const styles = StyleSheet.create({    conatiner: {        flex: 1,        backgroundColor: 'red',        flexDirection: isPortrait ? ('column') : ('row')    },    videoFullView: {        width: '100%',        height: '100%'    },    videoHalfView: {        width: isPortrait ? ('100%') : ('50%'),        height: isPortrait ? ('50%') : ('100%')    }})

Portrait output:

Landscape Output:

Expected Output:

Can you please help what should I do to get this done?

I tried adding Dimensions.addListener('change') didn't workedI just want to update My View rendering not the other Api Stuff.

I need to change flexDirection: isPortrait ? ('column') : ('row')

export const isPortrait = () => {    const dim = Dimensions.get('screen');    return dim.height >= dim.width;  };

Im using loop to run animation infinitely but i want to run animation with a delay each time. the delay inside the animation just runs in the first time and not for further animation running.

Code:

Animated.loop(            Animated.timing(this.state.spinValue, {                toValue: 1,                duration: 3000,                useNativeDriver: true,                delay: 2500            })        ).start()

what i want is to run animation, then wait 2500ms, then run again.

whats happening is animation first start takes 2500ms delay but further loop doesn't have that 2500ms delay

I am running a react-native application on Mac. but I am getting "RNCSafeAreaView" was not found in the UIManager.

I've been struggling to solve this issue. I am using RN 0.61.5, react-native-document-picker 3.4.0, react-native-fs 2.16.6 and rn-fetch-blob 0.12.0. Tested in real device - iPhone 5s.

Objective:I want to check if the given uri exist in iOS.

Input value for uri: file:///private/var/mobile/Containers/Data/Application/2918F777-93D8-4256-9CF1-583AFB57456A/tmp/com.appname-Inbox/file-name.extension. I got this uri from the return value of react-native-document-picker.

Trial:

let uri = 'file:///private/var/mobile/Containers/Data/Application/2918F777-93D8-4256-9CF1-583AFB57456A/tmp/com.appname-Inbox/file-name.extension';uri = decodeURIComponent(uri); // to deal with file name that contain spaceconst rnfsRead = await RNFS.read(uri, fileSize, 0, 'ascii');// works only first trial. If I change the uri with a random string, it definitely will return ENOENT file not found.// But, when I use the "real uri" again, it keeps return ENOENT. idk why this is happenconst rnfsReadFile = await RNFS.readFile(uri, 'ascii'); // the result and behaviour is same as using RNFS.readconst rnFetchBlobExist = await RNFetchBlob.fs.exists(uri); // always return falseconst rnfsExists = await RNFS.exists(uri); // always return false

FYI, below code is what I use for the Android

const uri = 'content://com.android.providers.media.documents/document/xxxx';const rnFetchBlobExist = await RNFetchBlob.fs.exists(uri); // return the right value (true if exist and false if not)

Any help would be very helpful!

How to convert text to speech in react native TTS should be for dynamic text in real time.

I'm trying to connect the Spotify App Remote using the IOS SDK for Spotify however I'm running into this error every time I try to connect the app remote.

nw_socket_handle_socket_event [C39.1:1] Socket SO_ERROR [61: Connection refused]

I looked around Stack Overflow and Github and it seems like it's a React Native problem and so I try to connect my IOS app to react native which I did but I can't seem to open the Developer Menu on an actual IOS device. Whenever I try to open React-Devtools this screen comes up asking me to connect the Developer menu but I'm not able to do so.

I tried the Assistive Touch where I added a shake button but so far the developer menu has not shown.

Can anyone help me solved the error above or guide me or how to open the Developer Menu on an actual IOS device?

I have the following issue, FlatList is rendered inside ScrollView, and everything seems to fine except that while FlatList scrolling the buttons in ScrollView are not responding.

Structure is something like this:

ScrollView - verticalButtonListView - horizontalScrollView

So basically I am working with react native vector icons and when I run the project I get the error that I have multiple resources of SimpleLineIcons.ttf and all other icons that are imported by react-native vector icons. But when I open my Xcode and I see if I have two pods of RNVectorIcons I cannot see that. How do I solve my problem?THanks

Build system informationerror: Multiple commands produce '/Users/tusharpoddar/Library/Developer/Xcode/DerivedData/TrainThem-fchwxpkakfvcsifyrnnoxjvwuxot/Build/Products/Debug-iphonesimulator/TrainThem.app/SimpleLineIcons.ttf':1) Target 'TrainThem' (project 'TrainThem') has copy command from '/Users/tusharpoddar/Desktop/NewApp/TrainThem/node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf' to '/Users/tusharpoddar/Library/Developer/Xcode/DerivedData/TrainThem-fchwxpkakfvcsifyrnnoxjvwuxot/Build/Products/Debug-iphonesimulator/TrainThem.app/SimpleLineIcons.ttf'2) That command depends on command in Target 'TrainThem' (project 'TrainThem'): script phase “[CP] Copy Pods Resources”

I have uploaded the picture of my Xcode packages here. Please have a look.

I have a React Native View containing a Text field, and I'm using the onLayout prop to do some positional calculations which rely on the data it provides.

<View onLayout={this.calculateDimensions}><Text>{this.props.content}</Text></View>

This works well, but there is a scenario where the content prop updates to a different string with the same character size. This results in the layout not changing and onLayout not triggering.

These positional calculations must occur each time the content prop updates.

Note: I am aware there are numerous ways to make the component update. Updating is not the same as laying out and sadly does not trigger onLayout.

We're building a RN app (RN0.37), and we're running into an issue where when the app is run, we get a "TypeError: JSON.stringify cannot serialize cyclic structures".

Nothing of relevance has changed on the API responses, and the issues went away recently, but reappeared upon a wipe/rebuild (triggered by unrelated issues).

My suspicions are around a couple of packages being used: “react-native-router-flux” and "react-native-permissions”, but I haven't been able to find anything of relevance in the app.

Currently my suspicions around "react-native-router-flux" are mainly based around this article: https://github.com/aksonov/react-native-router-flux/issues/363

And my suspicions around "react-native-permissions" is mostly founded on the fact that the timing of the inclusion of this package on this project is suspicious, and seems to coincide with the surfacing of this error - although I can't prove that with absolute certainty.

The only additional clue I have, is that the JSON.stringify error always seems to be preceded by a list of warnings. They all read "This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://facebook.github.io/react/docs/events.html#event-pooling for more information." The list of goes as follows (always in the same order): nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted and touchHistory.

The following is my package.json:

"dependencies": {"blueimp-md5": "2.5.0","moment": "2.16.0","phone-formatter": "0.0.2","react": "15.3.2","react-native": "0.37.0","react-native-asset-library-to-base64": "1.0.1","react-native-aws3": "0.0.3","react-native-button": "1.7.1","react-native-cached-image": "1.2.2","react-native-camera-kit": "4.0.1","react-native-camera-roll-picker": "1.1.9","react-native-contacts": "0.5.2","react-native-fbsdk": "0.4.0","react-native-fetch-blob": "0.10.0","react-native-fs": "2.0.1-rc.2","react-native-geocoder": "0.4.5","react-native-image-crop-picker": "0.10.5","react-native-image-resizer": "0.0.12","react-native-nav": "1.1.4","react-native-permissions": "0.2.5","react-native-photo-view": "1.2.0","react-native-router-flux": "3.37.0","react-native-stripe": "1.2.1","react-native-swipe-list-view": "0.3.1","react-redux": "4.4.6","redux": "3.6.0","redux-storage": "4.1.1","redux-storage-engine-reactnativeasyncstorage": "1.0.2","underscore": "1.8.3"}

I would wish to submit my react-native app to app store, but I don't know how to build it.

I've been following this official doc of react-native (http://reactnative.dev/docs/running-on-device#building-your-app-for-production) about how to build my app for production, but sadly in my case it does not quite give enough information.

Regarding building an app, the guide says this:

You can now build your app for release by tapping ⌘B or selecting Product → Build from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.

And I can do this. But the problem is, that I need to build my app with an ENVFILE environment variable that defines where my applications configurations are read from.

With this in mind, the official guide also states:

You can also use the React Native CLI to perform this operation using the option --configuration with the value Release (e.g. npx react-native run-ios --configuration Release).

This is almost what I want. But I don't want to run my app. I just want to build it. So is there a way to build my app with the react-native cli tool? Without running it? Or could I just run it and in the process it gets build and I could find the final build in some folder then? Or if this doesn't work, could I then some way configure the ENVFILE environment variable to xcode that my app will get it?