We Keep Coding

Styles are not showing in React Native

Styles are not showing in React Native. I'm new to RN so please if you can help me understand ..Here is the code :
import { template } from '#babel/core'
import React from 'react'
import { View , Text, SafeAreaView, StyleSheet } from 'react-native'
const styles = StyleSheet.create({
container : {
alignItems:'center',
backgroundColor:'pink',
},
})
const App = ()=>{
return(
<SafeAreaView>
<View style={styles.container}>
<Text>Hello World!!</Text>
</View>
</SafeAreaView>
)
}
export default App

So, I found the answer after half an hour. It's just i needed to rerun the application and it worked. Also flex :1 helps.

Lottie Animation JSON crashes my code with no explanation

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.

React Native Expo error: Hooks can only be called inside the body of a function component

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;

Text strings must be rendered within a <Text> component issue in React Native

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>

Cannot read property 'viewManagersNames' of undefined

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?