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.
Related
I'm trying to use Formik for React Native. I basically copy pasted the plain documentation example which does not work for me, and don't find any other relevant examples to help.
https://formik.org/docs/guides/react-native
I just tried also to use a functional component :
import React, { useState, useRef } from 'react';
import {
Text, StyleSheet
} from 'react-native';
import { Formik} from "formik";
import { Card, Button, TextInput, View } from 'react-native-elements';
function AddActivityScreen() {
return(
<Formik
initialValues={{ email: '' }}
onSubmit={values => console.log(values)}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<TextInput
onChangeText={handleChange('email')}
onBlur={handleBlur('email')}
value={values.email}
/>
<Button onPress={handleSubmit} title="Submit" />
</View>
)}
</Formik>
)
}
export default AddActivityScreen;
I keep having this error :
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Formik`.
I don't understand what the problem is with Formik as I am just executing the code sample provided in the doc. Please someone help
The problem is not related to Formik but the import of your other components
you are importing TextInput and View from react-native-elements which does not exist in that package these are part of react-native itself.
When you do this and try to render, the above error comes up.
Change your imports like below
import React, { useState, useRef } from 'react';
import {
Text, StyleSheet,TextInput, View
} from 'react-native';
import { Formik} from "formik";
import { Card, Button } from 'react-native-elements';
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.
I'm trying to make the UI for my app in the below picture:
My App's UI
I follow the instruction of React Navigation to make the Custom Navigator according to the UI but it doesn't work in Android. The red screen appears with the message "Cannot Add a child that doesn't have a YogaNode to a parent without a measure function". Here is my code:
import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import TabAboutScreen from './TabAbout';
import TabMyLessonScreen from './TabMyLesson';
import TabTeacherScreen from './TabTeacher';
import { ScrollView, View, Text } from '../../../components';
import TabNavigator from './TabNavigator';
import TopBar from './TopBar';
import styles from './styles';
import CourseHeader from './CourseHeader';
import theme from '../../../theme';
import i18n from '../../../i18n';
export const CourseDetailStackNavigator = createStackNavigator({
TabAbout: TabAboutScreen,
TabMyLesson: TabMyLessonScreen,
TabTeacher: TabTeacherScreen,
}, {
headerMode: 'none',
initialRouteName: 'TabAbout',
});
export default class TabCourseDetail extends Component {
static router = CourseDetailStackNavigator.router;
constructor(props) {
super(props);
this._handleOnBackButtonPress = this._handleOnBackButtonPress.bind(this);
}
_handleOnBackButtonPress() {
// do something
}
render() {
return (
<View style={styles.container}>
<TopBar textButton={i18n.t('CMBack')} title={i18n.t('CDCourseDetail')} onPress={this._handleOnBackButtonPress} />
<ScrollView
style={styles.scrollContainer}
stickyHeaderIndices={[1]}
showsVerticalScrollIndicator={false}
alwaysBounceVertical={false}
>
<CourseHeader />
<TabNavigator />
<View style={styles.test}>
<CourseDetailStackNavigator navigation={this.props.navigation} />
</View>
</ScrollView>
</View>
);
}
}
My evironment: react-navigation: 2.12.1, react-native: 0.55.4
I found out that the problem was that I put inside component by following the document of react navigation. It works well in iOS but doesn't work in Android.
Have you ever faced this problem. I'm looking forward to your solutions. Best regard.
Make sure you have not left any commented code in the return method and also have not left any text (string) without Text tag of react native.
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;
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} />
);
}
}