Develop Reference

React native RecordScreen Native Module is null

I want to use RecordScreen NativeModule in my react native app.
import {NativeModules} from 'react-native'
console.log(NativeModules) // This is empty {}
console.log(NativeModules.RecordScreen) // This is null
Currently I'm testing on android device yarn android build.
What is the reason for NativeModules is empty and NativeModules.RecordScreen is null ?

import {requireNativeComponent} from 'react-native';
const RecordComponent = requireNativeComponent('RecordComponent')
console.log(RecordComponent);
Try this instead
or if you wish to use the same one you can also do it like this:
import NativeModules from 'react-native'

How to add safeArea in React Native for Android

I'm developing an app with react native and testing it with my android emulator.The SafeAreaView component in React Native is currently applicable only to ios devices with ios version 11 or later.
Did someone know about anything to solve this issue?

Use SafeAreaView for IOS and use a padding for Android
import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
//Rest of your app
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#A6A9BC',
paddingTop: Platform.OS === 'android' ? 25 : 0
},
});

Material Ui - Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function

When I am loading this LoginScreen.js I m getting the above mentioned exception.
Before that I had installed
npm install #material-ui/core
import React from 'react';
import {Button} from '#material-ui/core/Button';
import { View } from 'react-native';
export default function LoginScreen() {
return (
<View>
<Button></Button>
</View>
);
}

You need to import differently. Try as the following:
import Button from '#material-ui/core/Button';
// or
import { Button } from '#material-ui/core';
Check from the official documentation here: Button API - Import.
I hope this helps!

LottieView shuts down the app on android and works on IOS

When using lottie in expo and react-native, all animations work on ios however crash the app on android. Is there something special for android I am missing?
I have created a new project and duplicated the issue by coping the code from the docs here
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from "lottie-react-native";
export default class App extends React.Component {
componentDidMount() {
this.animation.play();
// Or set a specific startFrame and endFrame with:
// this.animation.play(30, 120);
}
resetAnimation = () => {
this.animation.reset();
this.animation.play();
};
render() {
return (
<View style={styles.animationContainer}>
<LottieView
ref={animation => {
this.animation = animation;
}}
style={{
width: 400,
height: 400,
backgroundColor: '#eee',
}}
source={require('./assets/gradientBall.json')}
// OR find more Lottie files # https://lottiefiles.com/featured
// Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
/>
<View style={styles.buttonContainer}>
<Button title="Restart Animation" onPress={this.resetAnimation} />
</View>
</View>
);
}
}

If you are using Expo, you can't use Lottie 3 Files. From the expo api reference (https://docs.expo.io/versions/latest/sdk/lottie/):
"
Known Issues:
The Lottie SDK is currently considered to be under Expo's "DangerZone" because it's implementation is still in Alpha.
Importing Lottie 3 files causes the previewer to crash without a visible error, because Expo relies on lottie-react-native v2.
"

Run Yarn add lottie-react-native#3.0.3 or npm install lottie-react-native#3.0.3

the development server returned response error code: 500 -React Native

I am developing Android app using React Native. I tried running a simple code of a screen being displayed, but I get the following error. I tried closing all command line windows and emulator and re-starting React Native package and run it, but doesn't work. The code is provided below:
index.android.js:
import React, { Component} from 'react';
import {Text, View, AppRegistry,Button} from 'react-native';
import {StackNavigator} from 'react-navigation';
import dhrumil from '.\dhrumil.js';
export default class MainApp extends Component{
render(){
return(
<dhrumil />
);
}
}
const SimpleApp = StackNavigator({
Home: {screen: dhrumil }
});
AppRegistry.registerComponent("MainApp",()=>SimpleApp);
dhrumil.js:
import React, { Component} from 'react';
import {Text, View, AppRegistry,Button,StyleSheet} from 'react-native';
const dhrumil = () =>{
return(
<View style={styles.container}>
<Text style={styles.texter}>Hello World!</Text>
<Button
onPress={() => navigate('dharmin')}
title="Chat with Lucy"
/>
</View>
);
}
const styles = StyleSheet.create({
container:{
justifyContent: 'center',
alignItems: 'center',
flex: 1
}
texter:
{
fontSize: 20,
textAlign: 'center'
}
});
dhrumil.navigationOptions = {
title:'dhrumil'
}
export default dhrumil
How do I solve this?

In index.android.js change the import dhrumil from '.\dhrumil.js'; to import dhrumil from './dhrumil';. You have to use / to specify the path and it is not necessary use dhrumil.js when we are importing the js file.

#Jeffrey Rajan 's suggestion was absolutely correct here.
This error occurs mostly due to :
Issue 1:
A wrong file name in import statement
Using the wrong case in file name
Using '\' instead of '/' in file name
Hope that using this list you can easily find errors causing this in your code.
Issue 2:
An issue with the material design.To resolve this install material design locally using :
react-native-material-design
Issue 3:
babel-preset-react-native making trouble code. To resolve this issue run:
yarn remove babel-preset-react-native
yarn add babel-preset-react-native#2.1.0
Try troubleshooting in this order.Mostly the Issue 1 will solve the problem.