I started playing with react-native and I got a problem with centering a text, it's a very simple code but idk why it's not working
I was playing with animations too and none of all the examples that I did didn't work
So I have a View with a Text and the styles, with the flex should be enought, but isn't
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeView extends Component {
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>Hello World</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
alignItems: 'center',
justifyContent: 'center',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
}
});
Here is the App class
import React from 'react';
import { StyleSheet,View} from 'react-native';
import HomeView from './components/HomeView';
const App = () => {
return (
<View>
<HomeView/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
And the index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
You are not closing your class with } after render().
Inside of the App class you need to render the View with container style
so it would be
const App = () => {
return (
<View style={styles.container}>
<HomeView/>
</View>
);
};
so it has flex: 1 and then can take the full space and align itself properly.
Related
i am new in react-native and i am trying to programm an Android app there I have the following problem, I have a svg thats shows all states from germany and I want to get the ID of a state if I press on it.
my code
import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
import Germany from '../assets/Karte_Bundesrepublik_Deutschland.svg'
const StatesScreen = () => {
const handlePress = (stateName) => {
console.log(stateName.id)
};
return (
<View style={styles.container}>
<Germany onPress={(e) => handlePress(e)} />
</View>
);
};
export default StatesScreen
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Link to the svg:
https://upload.wikimedia.org/wikipedia/commons/2/2c/Karte_Bundesrepublik_Deutschland.svg
I just created a React Native app with Expo using expo init. Everything went fine. Then I went on and created a Home screen like so:
import React from 'react';
import { View, TextInput } from 'react-native';
export default class HomeScreen extends React.Component {
state = {
searchText: ""
}
render() {
return (
<View
style={{
flex: 1,
backgroundColor: 'white'
}}
>
<TextInput
placeholder="Search..."
value={this.state.searchText}
onChangeText={ (searchText) => this.setState({ searchText }) }
/>
</View>
);
}
}
I added it to my AppNavigator...
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
const AppNavigator = createStackNavigator({
Home: HomeScreen
});
export default createAppContainer(AppNavigator);
...which I in turn added to App.js:
import React from 'react';
import { StyleSheet, View, StatusBar, Platform } from 'react-native';
import { AppLoading } from 'expo';
import AppNavigator from './navigation/AppNavigator';
export default class App extends React.Component {
state = {
isLoadingComplete: false
}
render() {
if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
return (
<AppLoading
startAsync={this._loadResourcesAsync}
onError={this._handleLoadingError}
onFinish={this._handleFinishLoading}
/>
);
}
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
<AppNavigator />
</View>
);
}
_loadResourcesAsync = async () => { };
_handleLoadingError = error => {
console.warn(error);
};
_handleFinishLoading = () => {
this.setState({ isLoadingComplete: true });
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Now, my problem is that my app looks like this:
As you can see, the horizontal margins are way too big, but I never set them to be like that. What am I doing wrong? I want the TextInput to stretch across the full screen.
Your HomeScreen Component will be as wide as its contents. You did not specify the width of the main View, therefore, it adjusted itself to be as wide the components inside. What you can do to resolve this issue is that you must provide width property in your Top level View's style.
And in order to get the Width of the screen, you can import Dimensions from react-native and use that like below:
const windowWidth = Dimensions.get('window').width;
and finally, you can assign the windowWidth to your view like so:
style={{flex:1, width: windowWidth, backgroundColor: 'white'}}
I'm new to react-native and I'm getting this error. I already followed some solutions but I still get this, I also make sure that I followed tutorial properly, here's the code.
AppNavigation.js
import StackNavigator from 'react-navigation'
import Home from './Modules/Home'
const Routing = StackNavigator({
HOME: {screen: Home}
})
export default Routing
StartScreen.js
import React from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
import {DotIndicator} from 'react-native-indicators';
class StartScreen extends React.Component{
switchPage = () => this.props.navigation.navigate('HOME');
render() {
return (
<View style={{backgroundColor:'#3B3C3B', flex: 1}}>
<View style={{flex: 1}}></View>
<View style={styles.container, {flex: 1}}>
<Text style={styles.text}>MY POCKET</Text>
</View>
<View style={{flex: 1}}>
<DotIndicator color='#646363'/>
<Button onPress={this.switchPage} title='Click Me'/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignContent: "center"
},
text: {
fontSize:55,
fontWeight: "bold",
color: '#B5B5B5',
textAlign: "center"
}
})
export default StartScreen;
You must use withNavigation. Like this:
import {withNavigation} from 'react-navigation'
class StartScreen extends React.Component{
// ...
}
export default withNavigation(StartScreen) // export component like this
I'm trying to implement a Drawer Navigator in my application but it returns this error.
I'm using React-Native and react-navigation and android 9.0 for emulator
Error Message:
App return
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
ScroollView,
Dimensions,
Image
} from "react-native";
import {
createDrawerNavigator,
createAppContainer,
DrawerItems,
SafeAreaView[enter image description here][3]
} from "react-navigation";
import LoginScreen from "./Screens/Login/LoginScreen";
import HomeScreen from "./Screens/Home/HomeScreen";
type Props = {};
export default class App extends Component<Props> {
render() {
return <Apps />;
}
}
const CustomDrawerComponent = props => (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
backgroundColor: "white",
alignItems: "center",
justifyContent: "center"
}}
>
<Image
source={require("./images/perfil.png")}
style={{ height: 120, width: 120, borderRadius: 60 }}
/>
</View>
<ScroollView>
<DrawerItems {...props} />
</ScroollView>
</SafeAreaView>
);
const AppDrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
Settings: LoginScreen
},
{
contentComponent: CustomDrawerComponent
}
);
const Apps = createAppContainer(AppDrawerNavigator);
const styles = StyleSheet.create({});
I expected that application to start with the side menu working.
THe problem is in my code. It's ScrollView not ScroollView, my bad xd
I have a problem, when i use TabNavigator on 'react-navigation'. The problem is my screen show the blank view.
this is my code:
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import AuthScreen from './screens/AuthScreen';
import WelcomeScreen from './screens/WelcomeScreen';
export default class App extends React.Component {
render() {
const MainNavigator = TabNavigator({
welcome: { screen: WelcomeScreen },
auth: { screen: AuthScreen }
});
return (
<View style={styles.container}>
<MainNavigator />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
WelcomeScreen.js
import React from 'react';
import { Text, View } from 'react-native';
class WelcomeScreen extends React.Component {
render() {
return (
<View>
<Text>WelcomeScreen</Text>
<Text>WelcomeScreen</Text>
<Text>WelcomeScreen</Text>
<Text>WelcomeScreen</Text>
<Text>WelcomeScreen</Text>
<Text>WelcomeScreen</Text>
</View>
);
}
}
export default WelcomeScreen;
AuthScreen.js
Like
WelcomeScreen.js
I hope you can help me,thanks
Because your styles on App.js. Remove alignItems: "center"
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
},
});