By using this code(in below),The App has been RTL but location of Right & Left changed(So things must be shown in Right are turned to Left).I did it via tutorial.
ReactNative.I18nManager.allowRTL(true);
And another problem is when Mobile's language is LTR, Location of Images & designs turns into another side(for e.g changes from Right to Left) because App has only one LTR language. Is there any way for showing RTL & LTR like each other??
you can use this code :
first :
import { I18nManager } from 'react-native';
second in the App class use this :
constructor(props) {
super(props);
I18nManager.forceRTL(true);
}
something like this :
import React, { Component } from 'react';
import { View, I18nManager } from 'react-native';
import { Header } from './src/components/common';
import LoginForm from './src/components/LoginForm';
class App extends Component {
constructor(props) {
super(props);
I18nManager.forceRTL(true);
}
render() {
return (
<View>
<Header headerText="Authentication" />
<LoginForm />
</View>
);
}
}
export default App;
Related
i am searching for a way to build a Confirmation Code button for an Phone Authentication process , i saw many npm modules for that but that doesn't work me . I just have no idea how can i custom the from react-native , if someone have an idea , thanks
I tried to use this npm modules "react-native-confirmation-code-input" here react-native-confirmation-code-input
but that is doesn't work for me , i have a blank screen ...
here is my code :
import React, {Component} from 'react';
import {View} from 'react-native';
import {Card, CardSection, Input, Button} from '../common';
import CodeInput from 'react-native-confirmation-code-input';
class PhoneForm extends Component {
constructor(props) {
super(props)
}
static navigationOptions = {
header: null,
};
onFulfill(isValid, code) {
}
render() {
return(
<View>
<CodeInput
ref="codeInputRef2"
keyboardType="numeric"
codeLength={5}
className='border-circle'
compareWithCode='12345'
autoFocus={false}
codeInputStyle={{ fontWeight: '800' }}
onFulfill={(isValid, code) => this.onFullFill(isValid, code)}
/>
</View>
);
}
}
export default PhoneForm;
I faced same issue too, but first you need to do import style file after all the problem will be solved.
I am new in react native. I have used Wix react-native-navigation library for navigate between pages. I want to write a separate class for navigation like bellow and call it in everywhere that I need it in my project. But I get error for "this.props.componentId". Here is my function for navigation:
ScreenNavigation.js
import React,{Component} from 'react';
import {Navigation} from "react-native-navigation";
class ScreenNavigation extends Component{
constructor(props){
super(props)
}
goToScreen = (screenName) =>{
Navigation.push(this.props.componentId , {
component : {
name : screenName
}
});
}
}
const NextPage = new ScreenNavigation();
export default NextPage;
and here is my Login page (where I want to call the function):
Login.js
import React, {Component} from 'react';
import {View, Button, Text} from 'react-native';
import NextPage from "../../my_classes/ScreenNavigation"
export default class Login extends Component {
render() {
return (
<View>
<Text>Anna</Text>
<Button title={"Enter"} onPress=
{()=>NextPage.goToScreen('myRegister')}> </Button>
</View>
);
}
}
Please help me to solve my problem.
this is my index.js file:
import {Navigation} from 'react-native-navigation';
import Login from './my_screens/login®ister/Login';
Navigation.registerComponent('myLogin',()=>Login);
Navigation.events().registerAppLaunchedListener(()=>{
Navigation.setRoot({
root : {
stack : {
id:'AppStack',
children : [
{
component : {
name : 'myLogin' ,
options : {
topBar : {
title : {
text : 'Login'
}
}
}
},
}
]
}
}
}
)
});
Please follow the official documentation first. According to documentation you must register component screen first. Otherwise you cannot navigate to that screen. Secondly you are not passing any props. So its actually undefined.
If you want to execute a function of a component into another component there is two ways to todo that.
By passing prop into your child component like
<RootcComponent
<Login gotoScreen={this. goToScreen} />
/>
and then you need to call that function in you login component
this.props.goToScreen()
But if this component is not your child component then you need to pass this is in your navigation params like this
this.props.navigation.navigate('RouteName', {goTo: this.goToScreen})
and then in your component where you want to execute this function
this.props.navigation.state.params.goToScreen()
I have a react-native app where I have developed a scanner feature using react-native-qrcode-scanner.However, when I try to scan the data, I get the below error-
error: can't find variable navigation
I see this error in onSuccess method at line authorizationToken.
My code-
import React, { Component } from 'react';
import {
Text,
View,
Image,
TouchableOpacity,
Linking
} from 'react-native';
import styles from '../assets/style';
import QRCodeScanner from 'react-native-qrcode-scanner';
export default class ScanScreen extends Component {
onSuccess(scanEvent) {
this.props.navigation.navigate("Result", {
'accessKey': scanEvent.data,
'authorizationToken':navigation.getParam('authorizationToken', undefined),
"userData": navigation.getParam('userData', undefined),
"methodName": "fetchData"
});
}
render() {
return (
<View style={styles.container}>
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
/>
</View>
);
}
}
Any idea what I m missing here. Any help is much appreciated.Thanks in advance.
Make sure that Your Screen is registered in react-navigation config (follow this guide: can't find variable navigation).
Or pass navigation prop to it with HOC withNavigation: https://reactnavigation.org/docs/en/with-navigation.html. Instead export default class ScanScreen extends Component do class ScanScreen extends Component and at end of file do
export default withNavigation(ScanScreen);
Don't forget about importing Higher Order Component: import { withNavigation } from 'react-navigation';
Also be sure that all native parts are properly linked. For example react-native-gesture-handle (https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#linking).
navigation has to be part of props so accessing navigation using this.props.navigation solves this issue.
When switching the horizontal screen, the interface is fitted with vertical screen
This is my code
import React, { PureComponent } from 'react';
import { Text, View } from 'react-native';
import Root from './src/root';
import Orientation from 'react-native-orientation';
export class App extends PureComponent {
componentWillMount(){
Orientation.lockToLandscape()
};
render() {
return (
<Root />
)
}
}
export default App
Initial loading
and then I reload my app is Fine
How should I fix it
Did you try adding a this.forceUpdate() to trigger a rerender?
你只有在componentWillMount()的時候lockToLandscape()但app根本沒有被rerender所以當然顯示不出來啊
I have extended the Text component in order to have a reusable text component with a custom font.
My custom component should accept the styles passed to it and add the custom font to it.
I'm currently doing this:
MyText.js
import React from 'react'
import {
Text,
StyleSheet
} from 'react-native';
export default class MyText extends React.Component {
render() {
const style =
Object.assign( {},
StyleSheet.flatten(this.props.style),
{fontFamily: "My Font"}
);
return (
<Text style={style}>
{this.props.children}
</Text>
);
}
}
While this works as expected, having to flatten the stylesheet every time seems wrong. The above is a trivial example, and I can think of other components on which I could use this pattern. For that reason, I want to make sure I'm not ignoring a more suitable approach.
Well it depends on how much you would want to customize. In this case , if it is just a different font, it could be something like
import React from 'react'
import {
Text,
StyleSheet
} from 'react-native';
import _ from 'lodash';
export default class MyText extends React.Component {
render() {
const filteredProps = _.omit(this.props, 'style');
return (
<Text style={[{fontFamily: "My Font"}, this.props.style]} {...filteredProps} />
);
}
}