I use the below code:
import React from 'react';
import { Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={{paddingTop:30,flexDirection:'row',}}>
<View style={{backgroundColor:'red',width:50,height:50}}><Text>1</Text></View>
<View style={{backgroundColor:'green',width:50,height:50}}><Text>2</Text></View>
</View>
);
}
}
and the result is:
I think the correct result should be:
why is the result not what I expect it to be?
use flex instead of height and width like this:
import React from 'react';
import { Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={{paddingTop:30,flexDirection:'row',}}>
<View style={{backgroundColor:'red',flex:.5}}><Text>1</Text></View>
<View style={{backgroundColor:'green',flex:.5}><Text>2</Text></View>
</View>
);
}
}
you can set flex according to yourself. this is just an example...
I find the problem, it's because of location that set in Genymotion, I use below code in App.js and solve the problem
import {I18nManager} from 'react-native'
I18nManager.forceRTL(false)
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")
}
}
First thing is that in Test1.js when i uses Test2.js two time.In the first one I passes the data="First" and in second one I passes data="Second". But when the screen render and when I press the Button First It show "First" on the screen but when I press button second,it do'nt render "Second" on screen.
As I found that the value of state in the Test2.js is not changing.
Can You explain me why the value of state is not changing in the Test2.js
And can anyone tell how to fix this.And more thing if I uses component instead of this.A() and this.B() it works fine but as below method not works.
Here is the code..
Test1.js
import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
import {Button} from 'react-native-elements'
import Test2 from './Test2';
var a = "First"
var b = "second"
export default class Test1 extends Component {
state={
activeA:true,
activeB:false
}
A = ()=>{
return( <Test2 data={a}/>)
}
B = () =>{
return(<Test2 data={b}/>)
}
render() {
return (
<View style={{ flex:1,justifyContent:'center',padding:20}}>
<Button buttonStyle={{ marginBottom: 10}} title="First" onPress={()=>{this.setState({activeA:true,activeB:false})}}/>
<Button buttonStyle={{ marginBottom: 10}} title="Second" onPress={()=>{this.setState({activeA:false,activeB:true,})}}/>
{this.state.activeA?this.A():this.B()}
</View>
)
}
}
Test2.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Test2 extends Component {
state={
data:this.props.data
}
render() {
return (
<View>
<Text syle = {{fontSize:20,}}> {this.state.data} </Text>
</View>
)
}
}
Do not transfer to the status value, but render directly.
Test2.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Test2 extends Component {
constructor(props) {
super(props);
const { data } = props
}
render() {
return (
<View>
<Text syle = {{fontSize:20,}}> {this.props.data} </Text>
</View>
)
}
}
Test2.propTypes = {
data: PropTypes.string
}
I'm trying to implement one functional component. Here I am doing below, But I'm getting error about props. Could someone help me.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const TextField = () => {
return (
<Text> {this.props.title} </Text>
)
}
export default TextField;
// APP Component
import TextField from './Components/TextField'
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<TextField title= "Simple App"/>
</View>
);
}
}
The reason is this.props is not defined in a functional component. They receive the props as an argument.
Change your TextField to take argument props and use props.title
const TextField = (props) => {
return (
<Text> {props.title} </Text>
)
}
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);
I have seen similar questions asked but I can't seem to indentify the problem.
I am using react native v 0.27
I have changed all my require methods into imports.
Here's the error I receive:
I don't know if its relevant, but the first position of the error points to my LoginComp.js file which contains the following code:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableHighlight
} from 'react-native';
class LoginComp extends Component {
constructor(){
super(props);
}
render() {
return (
<View style={{flex: 1}}>
<View style={this.props.styles.loginLogoContainer}>
<Image style={this.props.styles.view1logo} source={require('../imgs/Logo.png')} />
</View>
<View style={this.props.styles.loginContainer}>
<Text>Użytkownik:</Text>
<TextInput
style={this.props.styles.defaultInput}
placeholder="Użytkownik"
stretch={true}
autoComplete={false}
autoCorrect={false}
/>
<Text>Hasło:</Text>
<TextInput
style={this.props.styles.defaultInput}
placeholder="Hasło"
stretch={true}
autoComplete={false}
autoCorrect={false}
secureTextEntry={true}
/>
<TouchableHighlight onPress={this.props.LoginPress}>
<Text style={this.props.styles.loginButton}>Login</Text>
</TouchableHighlight>
</View>
<View style={this.props.styles.registrationWrapper}>
<Text>- lub -</Text>
<TouchableHighlight onPress={this.props.t_Registration}>
<Text style={this.props.styles.registration}>Załóż nowe konto</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
module.exports = LoginComp;
Change your import statement like below and try.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableHighlight,
} from 'react-native';
Also constructor should be like below
constructor(props){
super(props);
}
I faced the same issue. Wrongly imported
import React, { Component } from "react-native";
instead of
import React, { Component } from "react";
see this answer https://stackoverflow.com/a/37676646/5367816
I hit this error when attempting to use:
class Leaderboard extends React.component {
}
It should have been Component with a capital C!
Personnaly, I solved this problem in another way:
I was importing a default module like import Module from "./path/to/Module.js".
But in the Module.js file, I ommited the default keyword:
export class Module {/*...*/} -> export default class Module {/*...*/}
Hope this will help someone. =)
just add the props in App.js file
type Props = {};
export default class App extends Component
May be latest version of expo/react native does not support #expo/react-native-action-sheet#2.5.0
upgrading #expo/react-native-action-sheet works for me:
yarn add #expo/react-native-action-sheet#latest