I am using react native video with repeat prop so that video is repeating continuously the issue here is that video show a black screen for few seconds and again repeats that video, it shows a black screen at the end of the video, any solution for that?

I have a super weird issue.I have a React Native app, where you can upload the videos. It works on Android (both device and simulator) and iOS simulator. It doesn't work on iOS device (that might not be 100% true, because when I got random hot-reloads on upload screen I think it worked a couple of times... or maybe someone else was uploading at the same time... - bottom line is it's not working 99% of the times). And by not working I mean, I'm still getting 200 in return, but video is definitely not in there.

I was wondering if there's something with the request so I decided to send whole traffic through Charles Proxy. But as soon as I do that, video upload works EVERY SINGLE TIME! I'm not sure what to make of this, but it's driving me insane. Does anyone know what could cause such a behaviour? Or what could be the difference when I just proxy the requests? It shouldn't add any extra headers or anything right that, right?

Since it's working on Android and simulator my guess is it's not the bug in the code, but maybe some magic iOS permissions. Or maybe there's something wrong with backend... Here's the code anyway.

I'm using the following libs:

• react-native-image-picker for selecting a video
• rn-fetch-blob for uploading

Selecting video file:

import React, { useState } from 'react';import {  View,  Text,  TouchableOpacity,} from 'react-native';import ImagePicker from 'react-native-image-picker';const Main = () => {  const [selectedVideo, setSelectedVideo] = useState();  const selectVideo = () => {    const options = {      title: '',      takePhotoButtonTitle: 'Take Video...',      mediaType: 'video',      videoQuality: 'high',      allowsEditing: false    };    ImagePicker.showImagePicker(options, (response) => {      if (response.didCancel) {        console.log('User cancelled video picker');      } else if (response.error) {        console.log('ImagePicker Error: ', response.error);      } else if (response.customButton) {        console.log('User tapped custom button: ', response.customButton);      } else {        // SUCCESS        console.log('Video selected: ', response);        setSelectedVideo(response);      }    });  };  return (<><View><TouchableOpacity          onPress={() => selectVideo()} ><Text>SELECT VIDEO</Text></TouchableOpacity></View></>  );};export default Main;

Example of videoData object:

{    fileName: "IMG_0001.MOV"    latitude: 0.0    longitude: 0.0    origURL: "assets-library://asset/asset.MOV?id=79B0BFFB-0A7A-4E5A-B5A5-6A5B1696904D&ext=MOV"    timestamp: "2020-06-13T15:57:43Z"    uri: "file:///var/mobile/Containers/Data/Application/F0E74319-E698-4180-90E1-767155011EAC/tmp/trim.51E732F4-55D9-4A65-9226-F972532F4435.MOV"}

Uploading the file:

import { Platform } from 'react-native';import RNFetchBlob from 'rn-fetch-blob';const rootUrl = 'https://my.server.com';const TOKEN = "SuperSecretToken";const uploadVideo = (videoData, fileName) => {    const { uri } = videoData;    const url = `${ROOT_URL}/video/upload`;    const headers = {'Authorization': TOKEN,'Content-Type': 'multipart/form-data',    };    const contentType = Platform.OS === 'ios' ? 'video/quicktime' : 'video/mp4';    const fileName = uri.replace(/^.*[\\\/]/, '');    const realPath = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;    const body = [{        name: 'video',        type: contentType,        filename: fileName,        data: RNFetchBlob.wrap(decodeURIComponent(realPath)),    }];    RNFetchBlob        .fetch('POST',            encodeURI(url),            headers,            body        )        .uploadProgress((written, total) => {            console.log("Progress:", written / total);        })        .then((res) => {            let status = res.info().status;            if (status == 200) {                console.log("Res json =>", res.json());            } else {                console.log("Error", err);            }        })        .catch((err) => {            console.log("Error (catch) =>", err);        })};

Any hints appreciated.

I am trying to use some library react native and I didn't get what I was looking for. How to load panorama in local path & URL in React Native ?

Thanks.

I have a React Native application and I'm seeking to add functionality that checks if there is an active internet connection when the app first starts up, and continuously thereafter.

If there is no internet connection, I'm seeking to display a message saying "Internet connection not detected" with a button to "Try again"; if there is an internet connection, I'm seeking to load a page (WebView).

I'm also seeking to support both iOS and Android devices; I've researched this independently and have found a couple libraries on GitHub. However, many require an extra step of including a permissions addition in Android Manifest XML, however I don't see an Android Manifest XML file in my app; why does only Android need a manifest?

Any help is appreciated; thanks and take care.

When I try to run fresh installed React native project in Xcode I'm getting this error.

Though I have added a developer account for signing. My Xcode version is 10.0 (10A255)

I want to show custom count in badge android. while send cloud message the count will be 1 or 2 etc.. shows correctly. But i need to show while sending cloud message custom count. (ie: 10 or 20 or 30 );

config details

"react": "16.6.3","react-native": "0.58.6","react-native-firebase": "^5.4.3",    let badgeCount = await firebase.notifications().getBadge();    firebase.notifications().setBadge(badgeCount + 2);                (Or)    firebase.notifications().setBadge(10);

Sorry but I am new to React Native & Javascript. I am integrating a native iOS SDK into a React Native app. I have communication from the javascript side to native platform code (javascript can invoke swift methods and receive callbacks), great!. But in the SDK, a swift function is called (lets call it onComplete()) after some process completes (process could take hours). I was wondering if there is some way of invoking a javascript function or something to update UI from inside onComplete() swift method?

Recently did a build of my app and started getting the following error when testing on an iphone device or in the iphone emulator through Expo:

I am not even sure where to start. I cannot find anything in a google search that points me to a solution.

Recently I started to get this error:

NSPhotoLibraryUsageDescription key must be present in Info.plist to use camera roll.

I am using React Native to build my app (I am not familiar with ios native development) and I don't know how to add this key to Info.plist

Can you post an example? Thanks

I am using npm package "react-native-camera-roll-picker": "^1.1.7"

Im new in react native, and i facing the problem: Im using react native with flipper pods, and my pod file contain this code:

add_flipper_pods!  post_install do |installer|    flipper_post_install(installer)  end

But i need change my deployment target version of other pods with

post_install do |pi|    pi.pods_project.targets.each do |t|      t.build_configurations.each do |config|        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'      end    end  end

I get 3 different bugs, when try to solve this.How can i get combine this two hooks, or get other solutions to this problem?My pod file:

platform :ios, '9.0'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 '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'end# 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  endendtarget 'escapenavigator' do  # Pods for escapenavigator  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 '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'  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'  # post_install do |pi|  #   pi.pods_project.targets.each do |t|  #     t.build_configurations.each do |config|  #       config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'  #     end  #   end  # end  target 'escapenavigatorTests' 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 lines.  add_flipper_pods!  post_install do |installer|    flipper_post_install(installer)  endendtarget 'escapenavigator-tvOS' do  # Pods for escapenavigator-tvOS  target 'escapenavigator-tvOSTests' do    inherit! :search_paths    # Pods for testing  endend

Thanks!

I have social login in my app - and it gives options to login via Apple, Google and Facebook.Sign in with Apple and Facebook work alright. But if I tap on the Sign in with Google button, the Sign in with Apple alert still shows up.

I can cancel the box and continue login with Google. But I don't understand why it shows up. Is it because my Apple id is a gmail id?

I am using invertase/react-native-apple-authentication for Sign in with Apple.

Thank you for any tips

I want to be able to navigate from Main.dart to Exercises.dart.When I tap on the List Tile in my App Drawer I get the following error:

Navigator operation requested with a context that does not include a Navigator.

Main.dart

exercises.dart

Entire class

What seems to be the problem?

Thanks

I have a flatlist in react Native but i press button save not reload data automatically and not render in flattest but i reload app and the item save appears

I need that I press button save the data render data automatically in a flatList I need help I use very method but doesn't work to me

I have listScreen this save flatlist

Heading

class ListScreen extends Component {  /**   * Constructor.   */  constructor(props) {    super(props);    this.state = {      listData: [],    };  } /* End constructor. */  /**   * Render this component.   */  render() {    return (<Root><View style={styles.listScreenContainer}>          { /* ########## Add Restaurant button ########## */}<CustomButton            text="Add Restaurant"            width="94%"            onPress={() => { this.props.navigation.navigate("AddScreen"); }}          />          { /* ########## Restaurant list ########## */}<FlatList            style={styles.restaurantList}            data={this.state.listData}            renderItem={({ item }) =><View style={styles.restaurantContainer}><Text style={styles.restaurantName}>{item.name}</Text><CustomButton                  text="Delete"                  onPress={() => {                    Alert.alert("Please confirm","Are you sure you want to delete this restaurant?",                      [                        {                          text: "Yes", onPress: () => {                            // Pull data out of storage.                            AsyncStorage.getItem("restaurants",                              function (inError, inRestaurants) {                                if (inRestaurants === null) {                                  inRestaurants = [];                                } else {                                  inRestaurants = JSON.parse(inRestaurants);                                }                                // Find the right one to delete and splice it out.                                for (let i = 0; i < inRestaurants.length; i++) {                                  const restaurant = inRestaurants[i];                                  if (restaurant.key === item.key) {                                    inRestaurants.splice(i, 1);                                    break;                                  }                                }                                // Store updated data in storage.                                AsyncStorage.setItem("restaurants",                                  JSON.stringify(inRestaurants), function () {                                    // Set new state to update list.                                    this.setState({ listData: inRestaurants });                                    // Show toast message to confirm deletion.                                    Toast.show({                                      text: "Restaurant deleted",                                      position: "bottom",                                      type: "danger",                                      duration: 2000                                    });                                  }.bind(this)                                );                              }.bind(this)                            );                          }                        },                        { text: "No" },                        { text: "Cancel", style: "cancel" }                      ],                      { cancelable: true }                    )                  }} /></View>            }          /></View></Root>    );  } /* End render(). */  /**   * Execute after the component mounts.   */  componentDidMount() {    // Block hardware back button on Android.    BackHandler.addEventListener("hardwareBackPress", () => { return true; }    );    // Get list of restaurants.    AsyncStorage.getItem("restaurants",      function (inError, inRestaurants) {        if (inRestaurants === null) {          inRestaurants = [];        } else {          inRestaurants = JSON.parse(inRestaurants);        }        this.setState({ listData: inRestaurants });      }.bind(this)    );  }; /* End componentDidMount() */} /* End ListScreen. *//** * ############################################################################# * Add screen. * ############################################################################# */class AddScreen extends Component {  /**   * Constructor.   */  constructor(props) {    super(props);    this.state = {      name: "",      cuisine: "",      price: "",      rating: "",      phone: "",      address: "",      webSite: "",      delivery: "",      key: `r_${new Date().getTime()}`    };  } /* End constructor. */  /**   * Render this component.   */  render() {    return (<ScrollView style={styles.addScreenContainer}><View style={styles.addScreenInnerContainer}><View style={styles.addScreenFormContainer}>            { /* ########## Name ########## */}<CustomTextInput              label="Name"              maxLength={20}              stateHolder={this}              stateFieldName="name"            />            { /* ########## Cuisine ########## */}<Text style={styles.fieldLabel}>Cuisine</Text><View style={styles.pickerContainer}><Picker                style={styles.picker}                prompt="Cuisine"                selectedValue={this.state.cuisine}                onValueChange={                  (inItemValue) => this.setState({ cuisine: inItemValue })                }><Picker.Item label="" value="" /><Picker.Item label="Algerian" value="Algerian" /><Picker.Item label="American" value="American" /><Picker.Item label="BBQ" value="BBQ" /><Picker.Item label="Belgian" value="Belgian" /><Picker.Item label="Brazilian" value="Brazilian" /><Picker.Item label="British" value="British" /><Picker.Item label="Cajun" value="Cajun" /><Picker.Item label="Canadian" value="Canadian" /><Picker.Item label="Chinese" value="Chinese" /><Picker.Item label="Cuban" value="Cuban" /><Picker.Item label="Egyptian" value="Egyptian" /><Picker.Item label="Filipino" value="Filipino" /><Picker.Item label="French" value="French" /><Picker.Item label="German" value="German" /><Picker.Item label="Greek" value="Greek" /><Picker.Item label="Haitian" value="Haitian" /><Picker.Item label="Hawaiian" value="Hawaiian" /><Picker.Item label="Indian" value="Indian" /><Picker.Item label="Irish" value="Irish" /><Picker.Item label="Italian" value="Italian" /><Picker.Item label="Japanese" value="Japanese" /><Picker.Item label="Jewish" value="Jewish" /><Picker.Item label="Kenyan" value="Kenyan" /><Picker.Item label="Korean" value="Korean" /><Picker.Item label="Latvian" value="Latvian" /><Picker.Item label="Libyan" value="Libyan" /><Picker.Item label="Mediterranean" value="Mediterranean" /><Picker.Item label="Mexican" value="Mexican" /><Picker.Item label="Mormon" value="Mormon" /><Picker.Item label="Nigerian" value="Nigerian" /><Picker.Item label="Other" value="Other" /><Picker.Item label="Peruvian" value="Peruvian" /><Picker.Item label="Polish" value="Polish" /><Picker.Item label="Portuguese" value="Portuguese" /><Picker.Item label="Russian" value="Russian" /><Picker.Item label="Salvadorian" value="Salvadorian" /><Picker.Item label="Sandwiche Shop" value="Sandwiche Shop" /><Picker.Item label="Scottish" value="Scottish" /><Picker.Item label="Seafood" value="Seafood" /><Picker.Item label="Spanish" value="Spanish" /><Picker.Item label="Steak House" value="Steak House" /><Picker.Item label="Sushi" value="Sushi" /><Picker.Item label="Swedish" value="Swedish" /><Picker.Item label="Tahitian" value="Tahitian" /><Picker.Item label="Thai" value="Thai" /><Picker.Item label="Tibetan" value="Tibetan" /><Picker.Item label="Turkish" value="Turkish" /><Picker.Item label="Welsh" value="Welsh" /></Picker></View>            { /* ########## Price ########## */}<Text style={styles.fieldLabel}>Price</Text><View style={styles.pickerContainer}><Picker                style={styles.picker}                selectedValue={this.state.price}                prompt="Price"                onValueChange={                  (inItemValue) => this.setState({ price: inItemValue })                }><Picker.Item label="" value="" /><Picker.Item label="1" value="1" /><Picker.Item label="2" value="2" /><Picker.Item label="3" value="3" /><Picker.Item label="4" value="4" /><Picker.Item label="5" value="5" /></Picker></View>            { /* ########## Rating ########## */}<Text style={styles.fieldLabel}>Rating</Text><View style={styles.pickerContainer}><Picker                style={styles.picker}                selectedValue={this.state.rating}                prompt="Rating"                onValueChange={                  (inItemValue) => this.setState({ rating: inItemValue })                }><Picker.Item label="" value="" /><Picker.Item label="1" value="1" /><Picker.Item label="2" value="2" /><Picker.Item label="3" value="3" /><Picker.Item label="4" value="4" /><Picker.Item label="5" value="5" /></Picker></View>            { /* ########## Phone ########## */}<CustomTextInput              label="Phone Number"              maxLength={20}              stateHolder={this}              stateFieldName="phone"            />            { /* ########## Address ########## */}<CustomTextInput              label="Address"              maxLength={20}              stateHolder={this}              stateFieldName="address"            />            { /* ########## Web Site ########## */}<CustomTextInput              label="Web Site"              maxLength={20}              stateHolder={this}              stateFieldName="webSite"            />            { /* ########## Delivery ########## */}<Text style={styles.fieldLabel}>Delivery?</Text><View style={styles.pickerContainer}><Picker                style={styles.picker}                prompt="Delivery?"                selectedValue={this.state.delivery}                onValueChange={                  (inItemValue) => this.setState({ delivery: inItemValue })                }><Picker.Item label="" value="" /><Picker.Item label="Yes" value="Yes" /><Picker.Item label="No" value="No" /></Picker></View></View>          { /* ########## Buttons ########## */}<View style={styles.addScreenButtonsContainer}><CustomButton              text="Cancel"              width="44%"              onPress={                () => { this.props.navigation.navigate("ListScreen"); }              }            /><CustomButton              text="Save"              width="44%"              onPress={() => {                AsyncStorage.getItem("restaurants",                  function (inError, inRestaurants) {                    if (inRestaurants === null) {                      inRestaurants = [];                    } else {                      inRestaurants = JSON.parse(inRestaurants);                    }                    inRestaurants.push(this.state);                    AsyncStorage.setItem("restaurants",                      JSON.stringify(inRestaurants), function () {                        this.setState({ listData: inRestaurants }, () => {                          console.log(this.state.listData)                        })                        this.props.navigation.navigate("ListScreen");                        Toast.show({                          text: "Restaurant save",                          position: "bottom",                          type: "success",                          duration: 2000                        });                      }.bind(this)                    );                  }.bind(this)                );              }}            /></View></View></ScrollView>    );  } /* End render(). */} /* End AddScreen. */const styles = StyleSheet.create({  listScreenContainer: {    flex: 1,    alignItems: "center",    justifyContent: "center",    ...Platform.select({      ios: { paddingTop: Constants.statusBarHeight },      android: {}    })  },  restaurantList: {    width: "94%"  },  restaurantContainer: {    flexDirection: "row",    marginTop: 4,    marginBottom: 4,    borderColor: "#e0e0e0",    borderBottomWidth: 2,    alignItems: "center"  },  restaurantName: {    flex: 1  },  addScreenContainer: {    marginTop: Constants.statusBarHeight  },  addScreenInnerContainer: {    flex: 1,    alignItems: "center",    paddingTop: 20,    width: "100%"  },  pickerContainer: {    ...Platform.select({      ios: {},      android: {        width: "96%", borderRadius: 8, borderColor: "#c0c0c0", borderWidth: 2,        marginLeft: 10, marginBottom: 20, marginTop: 4      }    })  },  picker: {    ...Platform.select({      ios: {        width: "96%", borderRadius: 8, borderColor: "#c0c0c0", borderWidth: 2,        marginLeft: 10, marginBottom: 20, marginTop: 4      },      android: {}    })  },  addScreenButtonsContainer: {    flexDirection: "row",    justifyContent: "center"  }})// export default function RestaurantScreens ({ navigation }) {//         return (  //             // <View style={styles.homeScreen}>//             //     <Text>hola desde RestaurantScreens</Text>//             //     <Button//             //     title="Go to DesicionScreens"//             //     onPress={() => navigation.navigate('PeopleScreen')}//             //    />//             // </View>//             <View>//                 <ListScreen />//             </View>//         );// }// const styles = StyleSheet.create({//     homeScreen: {//       flex: 1,//       alignItems: 'center',//       justifyContent: 'center',//     },// })const stack = createStackNavigator();const RestaurantScreen = ({ navigation }) => (<stack.Navigator initialRouteName="ListScreen" headerMode="none"><stack.Screen name="ListScreen" component={ListScreen} /><stack.Screen name="AddScreen" component={AddScreen} /></stack.Navigator>)export default RestaurantScreen;

I know that is possible to disable the rotation using XCode, but I do not have access to some Mac in the moment, then I wonder if there is a way to do that using VSCode, and not XCode.

I want to make a package for react native that uses WebView (react-native-webview) component to load a local html file, but to load a local file it must be in the native folders: https://aboutreact.com/load-local-html-file-url-using-react-native-webview/

How to make the package uses the file in it's native code or copy the files to project's native code when installing the package?

PS: the local html contains JS libraries and css files so I cant use inline html.

I am having trouble displaying the number of unread messages outside the app icon.

I proceeded to install the library @react-native-community/push-notification-ios and used PushNotificationIOS.setApplicationIconBadgeNumber(10) to display the number of unread messages on the application icon. when I exit the app, I don't see the number of unread messages appearing on the icon.

Please help me.

I am currently opening the keyboard automatically as soon as the parent component or the modal is visible, which is what I want but the problem is that when I dismiss the modal first the keyboard will be dismissed, and then the modal will be dismissed which is causing bad UI interactivity. I would like to keep the keyboard still and only dismiss the parent component or the modal instead of both. I am using scrollView inside KeyboardAvoidingView while keyboardShouldPersistTapsis set to "always". you can find my code below:

    const amountInput = () => (<View style={styles.inputAndTextContainer}><Text style={styles.textStyle}>ETB</Text><TextInput        onKeyPress={({ nativeEvent }) => {          return nativeEvent.key === 'Backspace' ? clearLastChar() : null;        }}        caretHidden        ref={textInputRef}        style={styles.inputStyle}        autoCapitalize="none"        autoCorrect={false}        keyboardType="numeric"        defaultValue={amount.value}        /* value={amount.value} */        autoFocus        maxLength={6}        onChangeText={num => {          setAmount({ value: addCommaToNumber(num) });        }}      /></View>  );   return (<View><Modal        isVisible={isVisible}        animationIn="bounceInUp"        animationOut="slideOutDown"        animationOutTiming={200}        animationInTiming={200}        style={{ margin: 0 }}><KeyboardAvoidingView behavior="padding"><Header /><ScrollView            keyboardShouldPersistTaps="always"            alwaysBounceVertical={false}>            {amountInput()}            {state && state.length ? someFunc() : anotherFunc()}</ScrollView>          {renderModal()}          {state ? someFunc() : someotherfunc()}</KeyboardAvoidingView></Modal></View>    )

I am working on tutorial for React Native navigation. I found out that all layout starts loading from top of screen instead of below of the status bar. This causes most layouts to overlap with the status bar. I can fix this by adding a padding to the view when loading them. Is this the actual way to do it? I don' think manually adding padding is an actual way to solve it. Is there a more elegant way to fix this?

import React, { Component } from 'react';import { View, Text, Navigator } from 'react-native';export default class MyScene extends Component {    static get defaultProps() {            return {                    title : 'MyScene'            };      }       render() {            return (<View style={{padding: 20}}> //padding to prevent overlap<Text>Hi! My name is {this.props.title}.</Text></View>             )       }    }

Below shows the screenshots before and after the padding is added.

Some info first: this is not my workstation, this notebook is owned by the company i work on, i do have some access.

Some things are weird with the enviroment, but we can work, I`m not the only one having problems with the enviroment, but i dont think this is related to env, but with the latest iid update.

The way i have to start the project is by two terminals where

• the usage of sudo su is to prevent some bugs within our enviroment

  1 > [sudo su] yarn react-native start2 > [sudo su] yarn android:android:debug

which results in this error:

* What went wrong:Could not determine the dependencies of task ':app:mergeDebugAssets'.> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.> Could not find com.google.firebase:firebase-iid:.     Required by:         project :app > project :@react-native-firebase_iid

**import info :@react-native-firebase_iid received an update as of yesterday july/07/2020so before that all was working

follows the package.json file

"dependencies": {"@react-native-community/async-storage": "^1.6.1","@react-native-community/netinfo": "^5.6.2","@react-native-firebase/analytics": "^6.1.0","@react-native-firebase/app": "^6.1.0", DOWNGRADING DID NOT HELP ( version bellow )"@react-native-firebase/iid": "^6.3.4", DOWNGRADING DID NOT HELP ( version bellow )"axios": "^0.19.0","native-base": "^2.13.1","prop-types": "^15.7.2","react": "16.8.6","react-native": "^0.60.4","react-native-barcode-builder": "^1.0.5","react-native-config": "^0.12.0","react-native-dialog": "^5.6.0","react-native-elements": "^1.2.0","react-native-flip-card": "^3.5.5","react-native-geolocation-service": "^3.1.0","react-native-gesture-handler": "^1.3.0","react-native-image-picker": "^1.1.0","react-native-keychain": "^3.1.3","react-native-map-link": "^2.5.1","react-native-maps": "^0.25.0","react-native-masked-text": "^1.13.0","react-native-screens": "^2.3.0","react-native-splash-screen": "^3.2.0","react-native-touch-id": "^4.4.1","react-native-vector-icons": "^6.6.0","react-navigation": "^3.11.1","uninstall": "0.0.0"  },

yarn list --pattern "@react-native-firebase" results in

yarn list v1.22.4├─ @react-native-firebase/analytics@6.7.2├─ @react-native-firebase/app-types@6.7.1├─ @react-native-firebase/app@6.7.1└─ @react-native-firebase/iid@6.7.1Done in 0.49s.

Following another questions similar to this problem gave me these options

rm -rf node_modules/rm -rf yarn.lock./gradlew cleanyarn react-native link react-native-firebaseyarn react-native start --reset-cachetryng to sync the android project on android studioIOS also having problemsfollowing the iid instalation to react native from firebase

none worked, sadly

yarn react-native link react-native-firebase results in

        $ /home/raiadrogasil.com/kamoraes/Workspace/ProjetosRd/univers-app-react/node_modules/.bin/react-native link react-native-firebase        warn The following packages use deprecated "rnpm" config that will stop working from next release:          - react-native-maps: https://npmjs.com/package/react-native-maps        Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.        error Unknown dependency. Make sure that the package you are trying to link is already installed in your "node_modules" and present in your "package.json" dependencies. Run CLI with --verbose flag for more details.        error Command failed with exit code 1.        info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.```

settings.gradle

    rootProject.name = 'universAppReact'    include ':react-native-touch-id'    project(':react-native-touch-id').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-touch-id/android')    include ':react-native-gesture-handler'    project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')    apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)    include ':@react-native-firebase_app'    project(':@react-native-firebase_app').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/app/android')    include ':app'

build.gradle

    // Top-level build file where you can add configuration options common to all sub-projects/modules.    buildscript {        ext {        buildToolsVersion = "28.0.3"        minSdkVersion = 16        compileSdkVersion = 28        targetSdkVersion = 28        supportLibVersion = "28.0.0"        }        repositories {        google()        jcenter()        }        dependencies {        classpath("com.android.tools.build:gradle:3.4.1")        classpath 'com.google.gms:google-services:4.3.1'        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files        }    }    allprojects {        repositories {        mavenLocal()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url("$rootDir/../node_modules/react-native/android")        }        maven {            // Android JSC is installed from npm            url("$rootDir/../node_modules/jsc-android/dist")        }        google()        jcenter()        }    }

the project stopped working after we tried a new clone, of the project ro resolve some issues.please if there are needed any more info, do tell me.

I've app in RTL layout, So I forced native code to apply RTL layout for ios/android.

in ios, I add this code in AppDelegate.m

// Force app Just Apply RTL layout[[RCTI18nUtil sharedInstance] allowRTL:YES];[[RCTI18nUtil sharedInstance] forceRTL:YES];

it's work and applies RTL layout,But I have an issue with Stack Navigator title screen,the title stuck in left! it should be in the right for example like the bottom tab bar it's accepted the RTL layout and works fine But title not works

and in headerTitleAlign: center | left It's not accepted right as value!

So how can I resolve this issue?

Code snippet

const HomeStackNavigator = () => {  return (<HomeStack.Navigator      screenOptions={{        headerStyle: {          backgroundColor: Theme.BackgroundColor,          elevation: 0,          shadowOffset: {            width: 0,            height: 0,          },        },        headerLeft: (props) => (<Feather            name="bell"            style={{paddingLeft: 10}}            size={30}            color={props.color}          />        ),        headerTitleAlign: 'left',      }}><HomeStack.Screen           options={{             title: 'الرئيسية',           }}           name="Home"           component={HomeScreen}         /></HomeStack.Navigator>  );};

What I got

What I expected