I just started developing an app in react-native and added a bottom navigation. I then started styling the components and noticed a white line above the navigation, which i simply can't get rid of.

Picture of the Problem

Any idea on how to make that line have the same color as the background would be appreciated. It might be possible that the default background color behind the views is "shining through" since it's white and I have no idea how to change it. The app is only supposed to work on my own iPhone XR, so I'm not concerned about compatibility with android or other iPhone models

I'm a complete beginner regarding react-native, so bear with me here. Here is my code so far:

Navigation

const Tab = createBottomTabNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Tab.Navigator
                tabBarOptions={{
                    activeTintColor: Colors.tabIconSelected,
                    inactiveTintColor: Colors.tabIconDefault,
                    style: styles.container
                }}>
                <Tab.Screen
                    name="Payments"
                    component={PaymentScreen}
                    options={{
                        tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name="logout"/>
                    }}/>
                <Tab.Screen
                    name="Income"
                    component={IncomeScreen}
                    options={{
                        tabBarIcon: ({focused}) => <TabBarIcon focused={focused} name="login"/>
                    }}/>
            </Tab.Navigator>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.darkBackgroundColor,
    }
});

Payment View

export default class PaymentScreen extends Component{
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>Payments!</Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: Colors.backgroundColor,
    },
    text:{
        color: Colors.textColor
    }
});

I didn't use react-native for a few months. It looks like some things have changed meanwhile. In the official documentation they recommend to uninstall react-native-cli and to usenpx react-native init instead. I did this but ended up with an error because I didn't install that package globally. However, if I install react-native globally, it results in an error when I run the project, saying that I should remove the global package.

What is the proper way to create a react app nowadays?

The Text input is center aligned, how to fix this text input so that it takes input from top left corner

Here is my css for text input

/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */

input: {
  flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
}

I integrated FCM messaging to my React Native app.

In my App component i tried to grant permissions by asking the user if he accept to get notifications or not .

My question is, am i using to right way to grant permissions?

I use async componentDidMount to implement the function requestPermission :

import firebase from '@react-native-firebase/app'
import messaging from '@react-native-firebase/messaging'

async componentDidMount () {
 // ......
    const granted = messaging().requestPermission()
    if (granted) {
  console.log('User granted messaging permissions!')
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
  firebase
    .messaging()
    .getToken()
    .then(fcmToken => {
      if (fcmToken) {
        // user has a device token
        console.log('fcm')
        console.log(fcmToken)
      } else {
        // user doesn't have a device token yet
        console.log('error')
      }
    })
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //
} else {
  console.log('User declined messaging permissions :(')
}
}

I get the FCM generated token, and i can send message using Postman to the device using this token. How can i be sure that the permissions are always granted and i can get the token from every device ? 

I am creating native module using create-react-native-module with swift. After that I have followed react native official documentation for iOS setup. doc link:: https://facebook.github.io/react-native/docs/native-modules-ios

I have created create-react-native-module with example. I am just adding simple function with returning string "Hello World" inside my native module.

My 'CustomModule-Bridging-Header.h'::

#import <React/RCTBridgeModule.h>

My 'CustomModule.m'::

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(CustomModule, NSObject)

RCT_EXTERN_METHOD(sampleMethod)

+ (BOOL) requiresMainQueueSetup {
  return YES;
}

@end

My 'CustomModule.swift':

import Foundation

@objc(CustomModule)
class CustomModule: NSObject {
  @objc(sampleMethod)
  func sampleMethod() -> String {
      return "Hello World"
  }
}

After making these changes to native module I have installed dependencies again inside example. Now my App.js is look like::

import React, { Component } from 'react';
import { Platform, Text, View } from 'react-native';
import CustomModule from 'react-native-custom-module';

export default class App extends Component {
    state = {
        message: '--'
    };

    async componentDidMount() {
        const msg = await CustomModule.sampleMethod();
        console.log('javascript calling msg::', msg);
        this.setState({
            message: msg
        });
    }
    render() {
        return (
            <View>
                <Text>CustomModule example☆</Text>
                <Text>{this.state.message}</Text>
            </View>
        );
    }
}

Here I am getting "msg" value as undefined. Please help!

I have been researching a way to create a VPN connection to tunnel whole device using react native but unfortunately there isn't any way to do that. There are Native Services to achieve that like VPNService in android and NetworkExtension in iOS but I've been unable to find a way or a library to do that in React Native. Is there any way to achieve that in react native or may be a method to expose device's VPN settings to manually set the configuration?

Is there a way to scroll a separate component with a FlatList?

<View>
  <View>
    <Text>Some component outside of FlatList</Text>
    <Text>Porfile Information Above FlatList</Text>
    <Text>How to scroll with flatlist</Text>
  </View>

  <FlatList
    data={DATA}
    renderItem={({item}) => (
      <View>
        <Text>a bunch of list that will scroll</Text>
      </View>
    )}
  />
<View>

So if you render this entire component, there's a section above the FlatList, and it'll just stay there while only the FlatList is scrollable.

How do you make it so the top section can scroll with the FlatList?

Detox is not working with Expo SDK 36?

Debugging reveals that it's hanging on await device.launchApp() in reloadApp() within detox-expo-helpers.

I've gone through the setup highlighted in: Is it actually possible to make Detox/Jest tests pass with a React Native app running with Expo?

Example of my test:

const { reloadApp } = require('detox-expo-helpers');

describe('Example', () => {
  beforeEach(async () => {
    await reloadApp();
  });

  it('should have welcome screen', async () => {
    await expect(element(by.id('welcome'))).toBeVisible();
  });
});

package.json

"scripts": {
        "e2e": "detox test --configuration ios.sim",
    },
    "devDependencies": {
        "babel-eslint": "^10.0.3",
        "babel-preset-expo": "^7.0.0",
        "detox": "^15.2.2",
        "detox-expo-helpers": "^0.6.0",
        "eslint-config-airbnb": "^18.0.1",
        "eslint-config-prettier": "^6.7.0",
        "eslint-plugin-prettier": "^3.1.1",
        "expo-detox-hook": "^1.0.10",
        "jest-expo": "^35.0.0",
        "pusher-js-mock": "^0.2.0",
        "react-native-testing-library": "^1.12.0",
        "react-test-renderer": "^16.12.0"
    },
    "private": true,
    "detox": {
        "configurations": {
            "ios.sim": {
                "binaryPath": "bin/Exponent.app",
                "type": "ios.simulator",
                "name": "iPhone 11"
            }
        },
        "test-runner": "jest"
    }

Even if I bypass the hanging promise via

    function timeout(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    beforeEach(async () => {
        reloadApp();
        await timeout(12000);
    });

It hangs on await expect(element(by.id('welcome'))).toBeVisible();

What am I doing wrong?

I have upgraded Yarn to v2. I see that there is no node_modules folder anymore. But my Podfile is still looking for it. How can I fix it?

I am trying to create an excel sheet from React Native mobile application. I have tried using xlsx to generate excel. But it is not supporting the styling excel sheet. Is it possible to use ExcelJS in React Native?

<View style={{flex:1}} >
      <ImageBackground
          source={require('../images/back02.png')}
          style={styles.bgscreen}
          onPress={Keyboard.dismiss}
          >
          <KeyboardAvoidingView behavior='position'>
          <Image
          style={styles.headImage}
          source={require('../images/login_img.png')} />
        <ImgBack navigation={this.props.navigation} />
        </KeyboardAvoidingView>
        </ImageBackground>
        </View>
        </TouchableWithoutFeedback>

If i remove <TouchableWithoutFeedback> then everything is fine. Help me. Don't ask for Child Component code. No need to know about that. Everthing is fine there.

I am just having problem with the <TouchableWithoutFeedback>

I have imported import { TouchableWithoutFeedback } from 'react-native-gesture-handler';

I get crash when use app, i dont know about crash detail. Please help.

Pods

pod 'Firebase/Core', '~> 6.14.0' pod 'Firebase/Messaging', '~> 6.14.0' pod 'Firebase/Database', '~> 6.14.0' pod 'Fabric', '~> 1.10.2' pod 'Crashlytics', '~> 3.14.0'

React Native

"react": "16.8.6",
"react-native": "0.60.0",

I have a React Native app with a WebView that access to a web page with a file upload. The problem is that in iOs when the file upload input is touched it shows a modal with 3 different options that are displayed in English.

Modal image

The options are Take Photo or Video, Photo Library, and the last one is "Explorar" this one is being displayed in Spanish I don't know why.

I have looking for these texts or for any option to translate that but I didn't find anything in react documentation nor google.

I need to display these options in the same language (in Spanish), App Store is rejecting my app because of that

Thanks.

I have a React Native app with a WebView that access to a web page with a file upload. The problem is that in iOs when the file upload input is touched it shows a modal with 3 different options that are displayed in English.

Modal image

The options are Take Photo or Video, Photo Library, and the last one is "Explorar" this one is being displayed in Spanish I don't know why.

I have looking for these texts or for any option to translate that but I didn't find anything in react documentation nor google.

I need to display these options in the same language (in Spanish), App Store is rejecting my app because of that

Thanks.

I am setting up IOS dev for React Native (0.61) app which has the working android version. What I did was to copy src of components and package.json file after react native environment is setup by following online post (installed xcode command line tool 10.2). But launching run-ios failed:

$ react-native run-ios
error Could not find "Podfile.lock" at /Users/mine/Documents/code/js/emps_fe6/ios/Podfile.lock. Did you run "pod install" in iOS directory?
error Could not find the following native modules: RNCAsyncStorage, RNDeviceInfo, RNGestureHandler, RNKeychain, BVLinearGradient, RNLocalize, RNReanimated, RNVectorIcons, react-native-video. Did you forget to run "pod install" ?
info Found Xcode project "emps_fe6.xcodeproj"
xcrun: error: unable to find utility "simctl", not a developer tool or in PATH
error Could not parse the simulator list output. Run CLI with --verbose flag for more details.
Error: Command failed: xcrun simctl list --json devices
xcrun: error: unable to find utility "simctl", not a developer tool or in PATH

    at checkExecSyncError (child_process.js:629:11)
    at Object.execFileSync (child_process.js:647:13)
    at runOnSimulator (/Usersamine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli-platform-ios/build/commands/runIOS/index.js:130:54)
    at Object.runIOS [as func] (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli-platform-ios/build/commands/runIOS/index.js:100:12)
    at Command.handleAction (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli/build/index.js:164:23)
    at Command.listener (/Users/mine/Documents/code/js/emps_fe6/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:198:13)
    at Command.parseArgs (/Users/amine/Documents/code/js/emps_fe6/node_modules/commander/index.js:651:12)
    at Command.parse (/Users/mine/Documents/code/js/emps_fe6/node_modules/commander/index.js:474:21)
    at setupAndRun (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli/build/index.js:237:24)

Here is the output of react native info:

$ react-native info
info Fetching system and libraries information...
System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-2675QM CPU @ 2.20GHz
    Memory: 194.93 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.17.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  IDEs:
    Xcode: /undefined - /usr/bin/xcodebuild
  npmPackages:
    react: 16.11.0 => 16.11.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Here is the package.json:

"dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "moment": "^2.24.0",
    "react": "16.11.0",
    "react-native": "0.61.2",
    "react-native-cli": "^2.0.1",
    "react-native-confirmation-code-field": "^4.1.0",
    "react-native-device-info": "^4.0.1",
    "react-native-elements": "^1.2.6",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-gifted-chat": "^0.11.3",
    "react-native-keychain": "^4.0.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-localize": "^1.3.1",
    "react-native-modal": "^11.4.0",
    "react-native-modal-datetime-picker": "^7.6.0",
    "react-native-reanimated": "^1.3.0",
    "react-native-segmented-control-tab": "^3.4.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-video": "^5.0.2",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.2",
    "react-navigation-tabs": "^2.5.6",
    "simctl": "^2.0.0",
    "socket.io-client": "2.1.1",
    "xcode": "^2.0.0"
  },

In the error message, there mentioned quite a few modules which are missing. But those modules have been installed as it shows in the package.json. I am not sure about what the error message means. Also I installed the simctl but scrum simctl still can not find it. I am using VS Code as IDE.

UPDATE:

created an empty Podfile.lock under /ios, the error becomes when run-ios:

error Cannot read property 'SPEC CHECKSUMS' of undefined. Run CLI with --verbose flag for more details.
TypeError: Cannot read property 'SPEC CHECKSUMS' of undefined
    at getDependenciesFromPodfileLock (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli-platform-ios/build/link-pods/getDependenciesFromPodfileLock.js:63:58)
    at warnAboutPodInstall (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli-platform-ios/build/link/warnAboutPodInstall.js:43:67)
    at Object.runIOS [as func] (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli-platform-ios/build/commands/runIOS/index.js:80:36)
    at Command.handleAction (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli/build/index.js:164:23)
    at Command.listener (/Users/mine/Documents/code/js/emps_fe6/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:198:13)
    at Command.parseArgs (/Users/mine/Documents/code/js/emps_fe6/node_modules/commander/index.js:651:12)
    at Command.parse (/Users/mine/Documents/code/js/emps_fe6/node_modules/commander/index.js:474:21)
    at setupAndRun (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli/build/index.js:237:24)
    at Object.run (/Users/mine/Documents/code/js/emps_fe6/node_modules/@react-native-community/cli/build/index.js:184:11)

I am new in programming and I don't know so much about it. I was thinking to make phone app with React Native. And I have an idea to make the app that will scan QR code and then display data to the app (something like web scraping and display data to the app). Is it possible to make it and what I need to know to make something like that? Ty.

Considering a simple example in React Native that uses React Navigation to go to a different screen, how can I disable the transition animation?

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

See the example on Snack

I have setup Passwordless authentication for my react-native app, for that it required to setup firebase dynamic links which I did successfully.

And everything was working fine on both Platforms Android and iOS, but after I merged my branch with the master, it stopped working on iOS. Meaning I am receiving the email to SignIn but that link is not opening the iOS app but it is working on Android successfully.

I did the following steps to setup Dynamic Links for iOS:

1. AppDelegate.m

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import Firebase;
//Deep Linking RNavigation Docs
#import <React/RCTLinkingManager.h>
//Deep Linking RNavigation Docs

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
 RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                  moduleName:@"realyze"
                                           initialProperties:nil];

 rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
 UIViewController *rootViewController = [UIViewController new];
 rootViewController.view = rootView;
 self.window.rootViewController = rootViewController;
 [self.window makeKeyAndVisible];
 [FIRApp configure];
 return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
 return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
 return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
//Deep Linking RNavigation Docs
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
           options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
 return [RCTLinkingManager application:app openURL:url options:options];
}
//Deep Linking RNavigation Docs

@end

2. Added Association Domains Capability In Xcode and in my Apple Developer Account for the particular App

3. Added TeamID to Firebase Console for the appID prefix.

4. Added these Firebase Authorized Domains: applinks:realyze.page.link activitycontinuation:realyze.page.link

5. Also added domains to an entitlements file

6.app-site-associations-file is also setup correctly

This setup worked for me before I merged my branch.

Help would be very much appreciated.

Thank you.

Is there a way of delegating in react native just like in swift/ios.. If we want to pass a information to a child class from parent class, we can do it by passing props. But what if we want to pass some information from the child class to parent class.

PS: No Redux or singleton approach.

I am new to mobile development using React Native. I would like to develop a notifications module as an iOS or Android application. It just so happens this module will interact with a web application I already have. In this case, I am only referencing the URL of the existing web application. The user will use the same login credentials. Once the user has logged in, they will receive notifications from the server-side of the existing web application when the status has changed or updated.

I have struggled with finding the solution for the last 3 weeks. I found some solution in using Firebase(for example) but I still have no idea how can my server interact with Firebase for sending notifications to unique user mobiles with the user credentials. Is there a recommended solution or any suggestion to boost my idea for this?

Thank you