Just starting out learning React Native. Going through examples on the official site. I did the Hello World example and the status bar is overlapping the text. How can I hide the status bar?
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Thanks
You can use the StatusBar component.
import React, { Component } from 'react';
import { AppRegistry, StatusBar, Text, View } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<View>
<StatusBar hidden={true} />
<Text>Hello world!</Text>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Related
I am trying to call a function from another class. All i need is when i press the button it should console log an output to my browser.I tried making some steps but it throws an error saying "Cannot read property of message". Here's my code
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import messageClass from "./message"
class App extends Component{
onPress = ()=>{
this.setState({FromStr: this.state.From})
this.setState({ToStr: this.state.To})
messageClass.message()
}
render(){
return (
<View style={styles.buttonStyle}>
<Button
title={"Press"}
color="#FFFFFF"
onPress={this.onPress}
/>
</View>
);
}
}
message.js
import { Component } from "react";
export default class messageClass extends Component{
message(){
console.log("Hiiiii")
}
}
Maybe you can try to use static method ?
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import messageClass from "./MessageClass"
export default class App extends Component{
onPress = ()=>{
messageClass.message()
};
render(){
return (
<View style={{width:100, height:50}}>
<Button
title={"Press"}
color="#FFFFFF"
onPress={this.onPress}
/>
</View>
);
}
}
import { Component } from "react";
export default class messageClass extends Component{
static message(){
console.log("foo")
}
}
I can't resolve this issue from my code.. When I switch to filmdetail view I got this error : Error: MobX injector: Store '...' is not available! Make sure it is provided by some Provider
Here my app.js
APP.JS
import React from 'react';
import {StyleSheet, View, Text} from "react-native";
import Navigation from './Navigation/Navigation';
import FilmStore from './Stores/FilmStore';
export default class App extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<View>
<Text>{FilmStore.test}</Text>
<Navigation filmStore={FilmStore} />
</View>
);
}
}
Here the navigation from React Navigation
Navigation.JS
import { createStackNavigator } from 'react-navigation';
// Views
import Search from '../Components/Search'
import FilmDetail from "../Components/FilmDetail";
const SearchStackNavigator = createStackNavigator({
Search: {
screen: Search,
navigationOptions: {
title: 'Rechercher'
}
},
FilmDetail: {
screen: FilmDetail,
navigationOptions: {
title: 'Détail'
}
},
});
export default SearchStackNavigator;
Here the film detail view
FilmDetail.JS
import React from 'react'
import Moment from 'moment';
import { observer, inject } from 'mobx-react';
import {StyleSheet, View, Text, ActivityIndicator, ScrollView, Image, Button} from 'react-native'
import {getDetail, getImageURI} from "../API/TMDBApi";
#inject('filmStore')
#observer
class FilmDetail extends React.Component {
constructor(props){
super(props);
console.log(props);
}
render() {
return (
<View>
</View>
)
}
}
export default FilmDetail
Looking for help :)
Thanks !
I replaced in app.js
..
import { observer } from 'mobx-react';
..
render() {
return (
<View>
<Text>{FilmStore.test}</Text>
<Navigation filmStore={FilmStore} />
</View>
);
}
by
..
import { observer, Provider } from 'mobx-react';
..
render() {
return (
<Provider filmStore={filmStore}>
<View style={styles.mainContainer}>
<Text>{filmStore.test}</Text>
<Navigation />
</View>
</Provider>
);
}
Now it works perfectly.
I'm trying to use react-native, react-navigation and typescript together to create an app. There are only two screens(HomeScreen and ConfigScreen) and one component(GoToConfigButton) in total, as follows.
HomeScreen
import React from "react";
import { NavigationScreenProps } from "react-navigation";
import { Text, View } from "react-native";
import GoToConfigButton from "./GoToConfigButton";
export class HomeScreen extends React.Component<NavigationScreenProps> {
render() {
return (
<View>
<Text>Click the following button to go to the config tab.</Text>
<GoToConfigButton/>
</View>
)
}
}
GoToConfigButton
import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";
class GoToConfigButton extends React.Component<NavigationInjectedProps> {
render() {
return <Button onPress={this.handlePress} title="Go" />;
}
private handlePress = () => {
this.props.navigation.navigate("Config");
};
}
export default withNavigation(GoToConfigButton);
The code for ConfigScreen is not given because it's not important here. Well, actually the above code works, I can go to the config screen by clicking on the button. The problem is, Typescript thinks I should provide the navigation property to GoToConfigButton manually.
<View>
<Text>Click the following button to go to the config tab.</Text>
<GoToConfigButton/> <-- Property "navigation" is missing.
</View>
How can I tell Typescript that the navigation property is given automatically by react-navigation?
You were just missing Partial<> interface wrapping your NavigationInjectedProps as it is described in this pull request where this issue was fixed.
import React from "react";
import { Button } from "react-native";
import { NavigationInjectedProps, withNavigation } from "react-navigation";
class GoToConfigButton extends React.Component<Partial<NavigationInjectedProps>> {
render() {
return <Button onPress={this.handlePress} title="Go" />;
}
private handlePress = () => {
this.props.navigation.navigate("Config");
};
}
export default withNavigation(GoToConfigButton);
Tested with #types/react-navigation >= 2.13.0
import styles from "./styles";
import React, { PureComponent } from "react";
import { Button } from "react-native-elements";
import {
DrawerItems,
NavigationInjectedProps,
SafeAreaView,
withNavigation
} from "react-navigation";
class BurgerMenu extends PureComponent<NavigationInjectedProps> {
render() {
return (
<SafeAreaView style={styles.container} >
<Button
icon={{ name: "md-log-out", type: "ionicon" }}
title={loginStrings.logOut}
iconContainerStyle={styles.icon}
buttonStyle={styles.button}
titleStyle={styles.title}
onPress={() => this.props.navigation.navigate("LoginScreen")}
/>
</SafeAreaView>
);
}
}
export default withNavigation(BurgerMenu);
When i run the code, i get this error:
invariant violation view config not found
index.js code is :
import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import main from './src/codes/main';
class app extends Component{
render(){
return <main/>;
}
}
AppRegistry.registerComponent('app', () => app);
main.js code is :
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class main extends Component{
render(){
return (
<View>
<Text>Salam</Text>
</View>
);
};
}
please help
The component names must be capitalized as a syntax requirement in React Native.
index.js
import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import Main from './src/codes/main';
class App extends Component{
render(){
return <Main/>;
}
}
AppRegistry.registerComponent('App', () => App);
main.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class Main extends Component{
render(){
return (
<View>
<Text>Salam</Text>
</View>
);
};
}
My first page with FlatList is :
import React, { Component } from 'react';
import { View, StyleSheet, FlatList, Text, TouchableHighlight } from 'react-native';
import { StackNavigator } from 'react-navigation';
import MoreInfo from './MoreInfo';
export default class Page1 extends Component {
constructor(props){
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<FlatList
data={users}
renderItem={
({item}) =>
<TouchableHighlight onPress={() => navigate('MoreInfo', { name: 'Jane' })}>
<Text style={styles.welcome}> {item.name} </Text>
</TouchableHighlight>
}
keyExtractor={item => item.index}
>
</FlatList>
</View>
);
}
}
const App = StackNavigator({
Page1: {screen: Page1},
MoreInfo: { screen: MoreInfo },
})
I am able to get the data displayed in a FlatList without using the navigation. But when I put Navigation and click any item on the list, I get the error:
Please help. Trying this since 3 days.
My index.android.js is
import React, { Component } from 'react';
import { AppRegistry} from 'react-native';
import MyApp2 from './src/components/MyApp2';
const MyApp2 = StackNavigator({
Page1: {screen: Page1},
MoreInfo: { screen: MoreInfo },
})
AppRegistry.registerComponent('MyApp2', () => MyApp2);
And My './src/components/MyApp2' is:
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, Alert,
FlatList, ActivityIndicator, Image,TouchableOpacity } from 'react-native';
import { Container } from 'native-base';
import AppHeader from './AppHeader';
import AppBody from './AppBody';
import AppFooter from './AppFooter';
export default class MyApp2 extends Component{
render(){
return(
<Container>
<AppHeader />
<AppBody/>
<AppFooter />
</Container>
)
}
}
I further have some tabs in the AppBody and including Page1 somewhere there. How would I go about it?
It doesn't look like you're importing Page1 anywhere and it's odd that you're importing MyApp2 and then defining a const for the StackNavigator that is also called MyApp2. I cannot test this since there are other files being imported, but I believe you just need to:
fix your imports,
fix your naming conflicts,
register all of your screens with StackNavigator so they all have access to the navigation prop,
and register the StackNavigator for your AppRegistry.
Try this:
Leave ./src/components/MyApp2 as is. Then make these edits (I'll be making the assumption that MyApp2, Page1, and MoreInfo are all located in ./src/components/:
Page1 file (whatever that is named):
import React, { Component } from 'react';
import { View, StyleSheet, FlatList, Text, TouchableHighlight } from 'react-native';
export default class Page1 extends Component {
constructor(props){
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<FlatList
data={users}
renderItem={
({item}) =>
<TouchableHighlight onPress={() => navigate('MoreInfo', { name: 'Jane' })}>
<Text style={styles.welcome}> {item.name} </Text>
</TouchableHighlight>
}
keyExtractor={item => item.index}
>
</FlatList>
</View>
);
}
}
index.android.js
import React, { Component } from 'react';
import { AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation';
// Making an assumption for where these files are located
// since it's not in the original question.
import MyApp2 from './src/components/MyApp2';
import MoreInfo from './src/components/MoreInfo';
import Page1 from './src/components/Page1';
/**
* This presumes that MyApp2 is the screen that will be loaded first.
* I don't know how you are getting to Page1, but it will be accessible
* if you navigate to it like so:
* this.props.navigation.navigate('Page1')
* Once there, the navigate() in the FlatList of Page1 should work as written.
*/
const RootNavigator = StackNavigator({
MyApp2: {screen: MyApp2},
Page1: {screen: Page1},
MoreInfo: { screen: MoreInfo },
})
AppRegistry.registerComponent('MyApp2', () => RootNavigator);
In your index.android.js file , you are using StackNavigator but you have not imported it .
use :
import { StackNavigator } from react-navigation