It works very normally when I use React Hooks or when I use react-native's Component, Hooks.
But when I call a function or Component from external packages such as Axios from my code, the app seems to be broken in that state. (or an empty screen)
I used react-native-cli.
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React, {useState, useEffect} from 'react';
import type {Node} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
Text,
useColorScheme,
View,
Center,
} from 'react-native';
import Axios from 'axios';
import {
Colors,
Header,
} from 'react-native/Libraries/NewAppScreen';
const App: () => Node = () => {
const isDarkMode = useColorScheme() === 'dark';
const [text, setText] = useState("");
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
useEffect(() => {
const fetch = async () => {
const {data} = await Axios.get(...); // broken
setText(data.result);
};
fetch();
}, []);
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Text>{text}</Text>
{/*
this Text Component is still empty.
*/}
</View>
</ScrollView>
</SafeAreaView>
);
};
export default App;
How can I solve this problem?
Related
I got stuck here ,
I needed to make a counter into the textinput ,
and I realize ,the counter has conflict with the handleChange.
I have no idea how to modify it ,could you please take a look at my code ?Thank you so much in advance ！！
import { StyleSheet, View } from 'react-native'
import React from 'react'
import AppForm from '../components/AppForm'
import * as Yup from 'yup'
import AppFormFieldWithCount from '../components/AppFormFieldWithCount';
const validationSchema = Yup.object().shape({
userName: Yup.string().required("Username can't be empty").label("Username"),
});
const EditScreen = () => {
const handleSubmit = async (userInfo) => {
console.log("receive information",userInfo);
};
return (
<View style={styles.container}>
{/** <TextInputWithCount number={12} maxLength={12} multiline={false} placeholder={"用户名"}/> */}
<AppForm
initialValues={{userName:''}}
validationSchema ={validationSchema}
onSubmit = {handleSubmit}
>
<AppFormFieldWithCount
name = {'userName'}
number ={15}
placeholder={"Username"}
maxLength ={15}
multiline={false}
/>
</AppForm>
</View>
)
}
export default EditScreen
const styles = StyleSheet.create({
container:{
padding:30,
}
})
Below ,it is the formik TextInput :
I have added the setValue for counting the text ,but the textinput will need the handleChange for getting the textinput information .Therefore, it has the conflict here, only one of them works in onChangeText function ...
import { StyleSheet, Text, View,TextInput} from 'react-native'
import React,{useState} from 'react'
import TextInputWithCount from './TextInputWithCount'
import AppErrorMessage from './ErrorMessage'
import { useFormikContext } from 'formik';
import colors from '../config/colors';
const AppFormFieldWithCount = ({name,number,maxLength,multiline,placeholder,...otherProps}) => {
const {setFieldTouched,handleChange,errors,touched} = useFormikContext();
const[value,setValue] = useState('');
return (
<>
<View style={styles.container}>
<TextInput placeholder={placeholder}
style={{flex:1,fontSize:18}}
placeholder = {placeholder}
multiline={multiline}
maxLength={maxLength}
onBlur = {()=>setFieldTouched(name)}
onChangeText = {
handleChange(name)
}
{...otherProps}
/>
<Text>{value === "" ? "0" : value.length}/{number}</Text>
</View>
<AppErrorMessage error={errors[name]} visible={touched[name]} />
</>
)
}
export default AppFormFieldWithCount
const styles = StyleSheet.create({
container:{
flexDirection:'row',
borderRadius:5,
borderWidth:1,
borderColor:colors.medium,
alignItems:'center',
width:'100%',
paddingHorizontal:10,
}
})
I have a header where is a input field. Is that possible to pass the value to my screen file ?
Header.js
import React, { useCallback } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TouchableOpacity, Dimensions, Platform, TextInput } from 'react-native';
import { useNavigation } from '#react-navigation/native';
import { Feather, AntDesign } from '#expo/vector-icons';
import Constants from 'expo-constants';
const width = Dimensions.get('window').width;
const headerHeight = 50;
const headerMessages = (text) => {
const navigation = useNavigation();
const [search, setSearch] = React.useState('');
const handleChangeInput = React.useCallback((e) => text(e));
const handleGoBack = useCallback(() => {
navigation.goBack();
});
return (
<View style={styles.container}>
<View style={styles.topHeader}>
<StatusBar color="#333" />
<Text style={styles.headerTitle}>Messages (0)</Text>
</View>
<View style={styles.searchContainer}>
<TextInput value={search} style={styles.searchInput} onChangeText={handleChangeInput} placeholder='Search Field' />
</View>
</View>
)
};
})
export default headerMessages;
Message.js
import * as React from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
const Messages = (props) => {
console.log(props.text);
return (
<View style={s.container}>
<Text>Messages</Text>
</View>
)
};
............................................................................................................................................................
If you want the 'search' state value in Message.js file, in that case initialize search in Message.js file and pass the setSearch hook as a callback function in the Header.js file.
And in the Header.js, get the state as props and set the value in textinput. In this way you will get the search value in the message.js file.
I Have started learning React Native. By following the documentation of React Native Paper I want a outlined Input box. I am using my QR code to test the app on my android phone. It displays the simple input element not the styled one
my App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-
native';
import Contants from 'expo-constants'
import Home from "./screens/Home";
import CreateContact from "./screens/CreateContact";
export default function App() {
return (
<View style={styles.container}>
{/* <Home /> */}
<CreateContact />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ebebeb',
marginTop: Contants.statusBarHeight,
},
});
My CreateContact.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, } from 'react-native';
const CreateContact = () => {
const [Name, setName] = useState("");
const [Phone, setPhone] = useState("");
const [Email, setEmail] = useState("");
const [Salary, setSalary] = useState("");
const [Picture, setPicture] = useState("");
const [Modal, setModal] = useState(false);
return (
<View style={styles.root}>
<View>
<TextInput
mode="outlined"
selectionColor="green"
label="Name"
placeholder="Name"
value={Name}
onChangeText={(text) => setName(text)}
/>
</View>
</View>
)
}
const styles = StyleSheet.create({
root: {
flex: 1, //take compelete height
}
})
export default CreateContact;
Output in Browser :
my app in mobile screen is same like how it is displaying browser
I'm following a udemy tutorial on react-native.
I'm trying to pass a prop from my index.js into my header.js. The header should say, "Albums". But is is always showing up blank.
If I remove {props.headerText} from header.js and replace it with
"Albums"
then it works. But I'm trying to make the component reusable per the tutorial instructions.
note: I'm using Create React Native App and this is on an android emulator.
App.js
import React from 'react';
import { View } from 'react-native';
import Header from './src/components/header';
export default class App extends React.Component {
render() {
return (
<Header />
);
}
}
index.js
import React from 'react';
import { Text, AppRegistry } from 'react-native';
import Header from './src/components/header';
const App = () => (
<Header headerText={'Albums'} />
);
AppRegistry.registerComponent('albums', () => App);
header.js
import React from 'react';
import { Text, View } from 'react-native';
const Header = (props) => {
const { textStyle, viewStyle } = styles;
return (
<View style={viewStyle}>
<Text style={textStyle}>{props.headerText}</Text>
</View>
);
};
const styles = {
viewStyle: {
justifyContent: 'center'
},
headerStyle: {
fontSize: 20
}
};
export default Header;
Am I missing anything? I've been over and over each file line by line and I can't find any issues.
Thanks!
I would suggest you
const Header = ({props}) => {
const { textStyle, viewStyle } = styles;
return (
<View style={viewStyle}>
<Text style={textStyle}>{props.headerText}</Text>
</View>
);
};
And to pass props ;
const App = () => (
<Header props={someProps} />
);
I am trying to compile react native project. the code for the file in which error is :
import React from 'react';
import {Text,View} from 'react-native';
const Header = () =>
{
const {textStyle} =styles;
return
(
<View>
<Text style={textStyle}>Albums!</Text>
</View>
);
};
const styles = {
textStyle:{
fontSize:20
}
};
export default Header;
You're not returning anything, you have to have the open paran on the same line as the return statement.
return (
<View>
<Text style={textStyle}>Albums!</Text>
</View>
);
You can also refactor it to:
import React from 'react';
import {Text,View} from 'react-native';
const {textStyle} =styles;
const Header = () => (
<View>
<Text style={textStyle}>Albums!</Text>
</View>
)
const styles = {
textStyle:{
fontSize:20
}
};
export default Header;