Peace...
I'm trying to make a text input component which receives input from user like below:
All inputs from user...
//AppTextInput (main supplier)
import React, { useState } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import defaultStyles from '../config/styles';
export default function AppTextInput({ icon, ...otherProps }) {
// const [firstName, setFirstName] = useState('');
// const [isNew, setIsNew] = useState(false);
return (
<View style={styles.container}>
{icon && <MaterialCommunityIcons name={icon} size={20}
color={defaultStyles.colors.medium} style={styles.icon}
/>}
<TextInput style={defaultStyles.text} {...otherProps}
placeholderTextColor={defaultStyles.colors.medium}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: defaultStyles.colors.light,
borderRadius: 25,
flexDirection: 'row',
width: '100%',
padding: 15,
marginVertical: 10,
},
icon: {
marginRight: 10,
alignSelf: 'center',
}
});
//config/styles (styling code)
import { Platform } from 'react-native';
import colors from './colors';
export default {
colors,
text: {
color: colors.dark,
fontSize: 18,
fontFamily: Platform.OS === "android" ? "Roboto" : "Avenir",
},
}
//AppFormField (for forms)
import React from 'react';
import { StyleSheet } from 'react-native';
import { useFormikContext } from 'formik';
import AppTextInput from '../AppTextInput';
import ErrorMessage from './ErrorMessage';
export default function AppFormField({ name, ...otherProps }) {
const { errors, handleChange, setFieldTouched, touched } = useFormikContext();
return (
<>
<AppTextInput
onBlur={() => setFieldTouched(name)}
onChangeText={handleChange(name)}
{...otherProps}
/>
<ErrorMessage error={errors[name]} visible={touched[name]} />
</>
);
}
//ListingEditScreen (this the main window to user)
export default function ListingEditScreen() {
return (
<Screen style={styles.container}>
<Form
initialValues={{
title: "",
price: "",
description: "",
category: null,
}}
onSubmit={(values) => console.log(values)}
validationSchema={validationSchema}
>
<AppFormField maxLength={255} name="title" placeholder="Title" />
<AppFormField
keyboardType="numeric"
maxLength={8}
name="price"
placeholder="Price"
width={120}
/>
<Picker
items={categories}
name="category"
numberOfColumns={3}
PickerItemComponent={CategoryPickerItem}
placeholder="Category"
width="50%"
/>
<AppFormField
maxLength={255}
multiline
name="description"
numberOfLines={3}
placeholder="Description"
/>
<SubmitButton title="Post" />
</Form>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
},
});
but my problem is that the input field only gets acitvated when I touch the placeholder text and not any other part of the text input field!
My main problem
So how can I solve this problem so that I can touch any part of the input field and it gets activated!
Thank-you!
Related
react-native-vision-camera doesn't appears after initialization
I was expecting Camera or something like this but screen stucks on Loading
I've tried a lot of things but couldn't solve the problem. Documentation didn't give any of useful information
import { Alert, StyleSheet, View } from "react-native";
import { Camera, useCameraDevices } from "react-native-vision-camera";
import { Loading } from "../components/Loading/Loading";
export const CameraScreen: FC = () => {
const devices = useCameraDevices();
const device = devices.back;
if (device == null) return <Loading />;
return (
<View style={style.screen}>
<Camera
device={device}
isActive={true}
style={StyleSheet.absoluteFill}
/>
</View>
);
};
const style = StyleSheet.create({
screen: {
flex: 1,
backgroundColor: "#222",
},
camera: {
flex: 1,
alignItems: "center",
justifyContent: "flex-end",
},
});```
Put cameraRef on component.
const cameraRef = React.useRef(null);
<Camera
ref={cameraRef} /* use cameraRef.current.takePhoto(): Promise<dataPhoto> */
photo={true} /* or video={true} */
device={device}
isActive={true}
style={StyleSheet.absoluteFill}
/>
See oficial docs.
I am trying to run the below code, but it throws the error "Text strings must be rendered within a <Text> component." I am using expo as of now. It reports no logs. The log section is empty.
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default function App() {
const [focusSubject, setFocusSubject] = useState(null);
return (
<View style={styles.container}>
focusSubject ? (
<Text>Screen 1</Text>
) : (
<Text>Screen 2</Text>
)
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#252250',
},
});
You need to use conditions in {} .
import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default function App() {
const [focusSubject, setFocusSubject] = useState(null);
return (
<View style={styles.container}>
{focusSubject ? (
<Text>Where am I going to build a timer</Text>
) : (
<Text />
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#252250',
},
});
I just started learning and practicing React Native and I have run into the first problem that I cant seem to solve by myself.
I have the following code, which is very simple, but the Alert.alert() does not work when I run it on the web. if I click the button nothing happens, however, when i click the button on an iOS or android simulator it works fine.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, Button, View, Alert } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.headerStyle} >Practice App</Text>
<Text style={{padding: 10}}>Open up App.js to start working on your app!</Text>
<Button
onPress={() => alert('Hello, Nice To Meet You :)')}
title="Greet Me"
/>
<StatusBar style="auto" />
</View>
);
}
I also know that alert() works on all three devices, however, I want to understand why Alert.alert() only works for iOS and Android.
My question is more so for understanding rather than finding a solution. Is the only solution to use alert(), or am I implementing Alert.alert() in the wrong way?
This workaround basically imitates react-native's Alert behavior with browsers' window.confirm method:
# alert.js
import { Alert, Platform } from 'react-native'
const alertPolyfill = (title, description, options, extra) => {
const result = window.confirm([title, description].filter(Boolean).join('\n'))
if (result) {
const confirmOption = options.find(({ style }) => style !== 'cancel')
confirmOption && confirmOption.onPress()
} else {
const cancelOption = options.find(({ style }) => style === 'cancel')
cancelOption && cancelOption.onPress()
}
}
const alert = Platform.OS === 'web' ? alertPolyfill : Alert.alert
export default alert
Usage:
Before:
import { Alert } from 'react-native'
Alert.alert(...)
After:
import alert from './alert'
alert(...)
Source & Credits: https://github.com/necolas/react-native-web/issues/1026#issuecomment-679102691
React Native is an open-source mobile application framework for Android, iOS and Web but there is not an Alert Component for Web but I have found a package which will provide you solutation. That is it to install package
npm i react-native-awesome-alerts
This example will help you
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
import Alert from "react-native-awesome-alerts";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { showAlert: false };
}
showAlert = () => {
this.setState({
showAlert: true,
});
};
hideAlert = () => {
this.setState({
showAlert: false,
});
};
render() {
const { showAlert } = this.state;
return (
<View style={styles.container}>
<Text>Practice App</Text>
<Text style={{ padding: 10 }}>
Open up App.js to start working on your app!
</Text>
<TouchableOpacity
onPress={() => {
this.showAlert();
}}
>
<View style={styles.button}>
<Text style={styles.text}>Greet Me</Text>
</View>
</TouchableOpacity>
<Alert
show={showAlert}
message="Hello, Nice To Meet You :"
closeOnTouchOutside={true}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#fff",
},
button: {
margin: 10,
paddingHorizontal: 10,
paddingVertical: 7,
borderRadius: 5,
backgroundColor: "#AEDEF4",
},
text: {
color: "#fff",
fontSize: 15,
},
});
I'm new at React-Native. I'm trying to build an app on mobile. But when I run this code I'm getting this error: React.createElement: type is invalid -- expected a string (for built-in components). My App.js:
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Header } from './components/Header';
export default function App() {
return (
<View style={styles.screen}>
<Header title="guess a number"/>
</View>
);
}
const styles = StyleSheet.create({
screen:{
flex: 1
}
});
My Header.js:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Header = props => {
return(
<View style={styles.header}>
<Text style={styles.headerTitle}> {props.title}</Text>
</View>
);
};
const styles=StyleSheet.create({
header: {
width:'100%',
height:90,
paddingTop: 36,
backgroundColor:'#f7287b',
alignItems: 'center',
justifyContent: 'center'
},
headerTitle: {
color:'black',
fontSize: 18
}
});
export default Header;
What should i do?
error
Your import of Header component is wrong. Import it as such :
import Header from './components/Header';
This is because you've exported as default in your Header.js File, so you need to import directly without {} brackets
Try to use:
<Header title={'guess a number'}/>
I am getting component class got object error while using react-native-router-flux, Here is my app.js file and component files.
app.js
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import ScarletScreen from './components/ScarletScreen';
import GrayScreen from './components/GrayScreen';
import {Router, Scene} from 'react-native-router-flux';
const App = () => {
return (
<Router>
<Scene key = "root">
<Scene
key = "scarlet"
component = {ScarletScreen }
title = "Scarlet"
initial
/>
<Scene
key = "gray"
component = { GrayScreen }
title = "Gray"
/>
</Scene>
</Router>
);
}
export default App;
ScarletScreen.js
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
const ScarletScreen = () => {
return (
<View
style={{
backgroundColor: '#bb0000',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text>Scarlet Screen</Text>
<Button title="IR PARA GRAY" onPress={() => Actions.gray()} />
</View>
);
};
export default ScarletScreen;
GrayScreen.js
import React, { Component } from 'react';
import {Text, View} from 'react-native';
import { Actions } from 'react-native-router-flux';
const GrayScreen = () => {
return(
<View style={{backgroundColor: '#666666', flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Gray Screen</Text>
</View>
);
};
When I click on a button, the error "element type is invalid: expected a string" is shown.
You need to ensure all your components are exported. GrayScreen is missing the export.
export default Grayscreen