I am working on an app, and am trying to implement a Lottie animation. For some reason, each time it starts the app it crashes, but when I use a normal loader animation that's built-in it works perfectly.
import LottieView from 'lottie-react-native';
import React from 'react';
import { View } from 'react-native';
import { globalStyles } from '../../../../theme/styles';
export const LottieAnimation = () =>{
return(
<View style={[globalStyles.center, globalStyles.horizontal]}>
<LottieView
style={{
width: 50,
height: 50,
}}
source={require('./49857-trodo-loader.json')}
/>
</View>
);
};
That's that function for the animation, and I can't find anything specifically wrong with it. Any ideas? The JSON is valid and everything. Any thoughts would be helpful.
Related
Im actually writing a code in React native but while using react-icon I still don't know how to import an icon on my project.
I've tried with components such as Image but I don't see them on my Screen.
Please help me, below I share the code:
import { StyleSheet,Image, View, } from 'react-native';
import { AiOutlineHome } from 'react-icons/ai';
export function Navbar() {
return (
<View style={style.nav}>
<Image
style={style.navIcon}
source={<AiOutlineHome/>}
/>
</View>
)
}
const style = StyleSheet.create({
nav:{
width:'100%',
height:50,
position:'absolute',
top:702,
},
navIcon:{
color:'red',
resize:'cover'
}
})
react-icons is not designed to be used with React Native.
Try this library - https://github.com/oblador/react-native-vector-icons
I'm just doing a course on React Native, and can't get any of the props to work using Drawer Navigator. I'm using iOS Simulator (14.3) on Mac M1, with WebStorm IDE. I'm also using bare React Native, not Expo.
I've attached my App.js code below. As you will see, it's very basic, but initialRouteName is the only prop that works. None of the others do what they are expected to do. The app doesn't crash, the props just don't change the behaviour as expected.
As far as I understand, these props are supported in iOS.
Can anyone help? Thanks in advance.
import React from 'react';
import { StyleSheet } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
// screen code held in separate .js files
import ScreenA from "./ScreenA";
import ScreenB from "./ScreenB";
import { createDrawerNavigator } from "#react-navigation/drawer";
const Drawer = createDrawerNavigator();
function App() {
return(
<NavigationContainer>
<Drawer.Navigator
initialRouteName={'Screen B'} // works fine
drawerPosition={"right"} // not working
drawerType={'front'} // not working
edgeWidth={800} // not working
hideStatusBar={true} // not working
overlayColor={'#000000'} // not working
drawerStyle={{
backgroundColor: '#56cb6a' // not working
}}
>
<Drawer.Screen name={'Screen A'}
component={ScreenA}
/>
<Drawer.Screen name={'Screen B'}
component={ScreenB}
/>
</Drawer.Navigator>
</NavigationContainer>
)
}
UPDATE: I seem to have got this working using screenOptions instead of Drawer.Navigator props. Maybe Drawer.Navigator props have been deprecated since the tutorial?
screenOptions={{
drawerPosition: 'right',
drawerType: 'front',
swipeEdgeWidth: 200,
headerShown: false,
overlayColor: '#00000050',
drawerStyle: {
backgroundColor: '#dee0e8',
width: 225
},
swipeEnabled: true,
}}
I am developing mobile app using React Native expo.. I am getting the following exception:
Invalid hook call. Hooks can only be called inside the body of a function component....
I have gone through the other answers posted here on SO and have confirmed that the hook in my code is indeed inside a function. But still I am unable to resolve the error. KIndly help. Please see my code below. Let me know if more clarification is needed.
import React, { useState, useEffect } from 'react';
import { SafeAreaView, StatusBar, Button, View, Platform , Text} from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
const statusBarPadding = Platform.OS === 'android' ? StatusBar.currentHeight: 0;
export default function OpenGallery () {
const [image, setImage] = useState(null);
useEffect(() => { // hook is inside function but still getting error
(async () => {
if (Platform.OS !== 'web') {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
})();
}, []);
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}>
<Text> Some text </Text>
</SafeAreaView>
);
}
Second file:
import React from 'react';
import { SafeAreaView, StatusBar, Button, View, Platform , Text} from 'react-native';
import OpenGallery from './OpenGallery'
const statusBarPadding = Platform.OS === 'android' ? StatusBar.currentHeight: 0;
export default function CameraScreen() {
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}>
<Text> Upload image from gallery.</Text>
<Button title="Select from Gallery" onPress={OpenGallery} />
</SafeAreaView>
);
}
it is in fact not being called from inside the component. you are calling it from the JSX, which is entirely different. there are two issues here that break the rules of hooks.
hooks must be called unconditionally. you are breaking that rule here.
<Button title="Select from Gallery" **onPress={OpenGallery}** />
Hooks must be called from inside a functional component. you cannot import another component and call it as a function. this is what you're doing. you are calling the react component on a onPress method which is wrong.
What can you do to fix it?
bring the state down. make the check to see if it's on a web or a mobile in the second file itself. i would post the code but i don't have expo installed at the moment.
It might sound out of scope here but I think in your case, you need to specify the behaviour on how do you want the OpenGallery to appear after pressing the button on CameraScreen... you may be using navigation (may be react-navigation) or using a modal.
Let's say you're using react-navigation. (as you're using expo, it's normally included in the project) https://reactnavigation.org/
On CameraScreen
export default function CameraScreen({navigation}) {
const gotoOpenGallery = () => {
navigation.navigate('OpenGallery');
}
return (
<SafeAreaView style={{ paddingTop: statusBarPadding }}>
<Text> Upload image from gallery.</Text>
<Button title="Select from Gallery" onPress={gotoOpenGallery} />
</SafeAreaView>
);
}
You will also need to create a StackNavigator
Your App.js (or your entry point of the app)
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import OpenGallery from './OpenGallery';
import CameraScreen from './CameraScreen';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="CameraScreen" component={CameraScreen} />
<Stack.Screen name="OpenGallery" component={OpenGallery} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I'm using react-native-cli version 2.0.1 and react-native version 0.57.8. I am learning React native, and have encountered an issue when trying to render two different child components (Header and AlbumList) in the main App component.
Issue
The error disappears if I remove the <View> tags and AlbumList component in the index.js file (meaning only show one component). I have looked through threads like this, but am still unable to identify how I'm using the <View> tag incorrectly.
index.js
import React from 'react';
import { View, Text, AppRegistry } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';
//>Create a component
const App = () => (
<View> <Header headerName={'Albums'} />
<AlbumList />
</View>
);
//>Render component on device
AppRegistry.registerComponent('albums', ()=> App);
AlbumList.js
import React from 'react';
import { View, Text } from 'react-native';
const AlbumList = () => {
return (
<View><Text> Album List </Text></View>
);
};
export default AlbumList;
I think the issue isn't anything to do with the Header.js file, but sharing code nonetheless.
Header.js
import React from 'react';
import { Text, View } from 'react-native'; // The view tag allows us to position and wrap elements
// Make a component
const Header = (props) => {
const { textStyle, viewStyle } = styles;
return (
<View style = {viewStyle}>
<Text style = {textStyle}> {props.headerName}</Text>
</View>
);
};
const styles = {
viewStyle: {
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60
},
textStyle: {
fontSize: 20
}
};
export default Header;
Help is appreciated. Thanks in advance!
in your index.js file, replace App function with below,
//Create a component
const App = () => (
<View><Header headerName={'Albums'} /><AlbumList /></View>
);
there should be no space between components here
while using react native components, try to put each element in a new line, in this way you don't have to worry about spaces
const App = () => (
<View>
<Header headerName={'Albums'} />
<AlbumList />
</View>
);
Let me know if it works
In my case i had a misplaced semicolon as shown and it was giving me so much headache
<Screen>
<RestaurantScreen />; //Make sure you have no misplaced semicolon like in my case here
</Screen>
I'm trying to create an ExpoPixi.Sketch View in React Native, but an error, 'Cannot read property 'viewManagersNames' of undefined' shows when the App loads. I cannot find anything on this error online.
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Provider } from 'react-redux';
import EStyleSheet from 'react-native-extended-stylesheet';
import ExpoPixi from 'expo-pixi';
import { Constants } from 'expo';
export default class App extends React.Component {
render() {
const color = 0xff0000;
const width = 5;
const alpha = 0.5;
return (
<View style={styles.container}>
<ExpoPixi.Sketch
strokeColor={color}
strokeWidth={width}
strokeAlpha={alpha}
style={{ flex: 1 }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: 'green',
}
});
I tried this same code in another new React Native project, and it works fine, creating a screen where the user can draw using their finger.
This also shows up in the console, but I am using expo so I don't think I can use react-native link.
*No native NativeModulesProxy found among NativeModules, are you sure the expo-react-native-adapter's modules are linked properly
How can I resolve this error?