Have you any idea to create a onFocus event in this input of the WebView ?
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<WebView
originWhitelist={['*']}
source={{ html: ' </br></br><form> <input type="text"
placeholder="name" onFocus=(*****)/> <input
type="text" placeholder="surname"/> <Button>Submit</Button>
</form>' }} />
</View>
)}}
I tried the usual onFocus but it doesn't work . I want to dispatch an event when i focus the input
To make a onFocusEvent to the input of the webview we have just to deal with postMessage and onMessage . Here is the full code :
let Script = `
document.getElementById("input").addEventListener("focus", function() {
var data = {
type: "OnFocusEvent",
message : "OnFocusEvent"
};
window.postMessage(JSON.stringify({data}),"*");
});
`;
<WebView
style={{ flex: 1 }}
source={{
html:
'</br></br></br></br><form > <input id="input" class="input" type="text"
placeholder="Product barcode "/></form>'
}}
keyboardDisplayRequiresUserAction={false} //ios
autoFocus={true} //android
injectedJavaScript={Script1}
automaticallyAdjustContentInsets={false}
allowFileAccessFromFileURLs={true}
scalesPageToFit={false}
mixedContentMode={"always"}
javaScriptEnabled={true}
javaScriptEnabledAndroid={true}
startInLoadingState={true}
onMessage={event => {
alert("You can do here whatever you want")
}}
onLoad={() => {}}
/>
There is closed Pull Request for that feature. For now, you can use react-native-enhance-webview
I hope that helps. Good luck.
Related
I want when i click the button, opening the modal. But modal is not opening correctly. And it is not readable.
Here is in my modal code :
<Modal
isOpen={showModal}
>
<Modal.Content top="-60" maxWidth={400} height={300}>
<Modal.CloseButton />
<Modal.Header> bilgiler</Modal.Header>
<Modal.Body>
<Text>09.08.2001</Text>
{/* <Select
minWidth="200"
accessibilityLabel="Choose Service"
placeholder="Son ölçüm tarihi seçiniz.."
_selectedItem={{
bg: "teal.600",
endIcon: <CheckIcon size="5" />
}} mt={1}
>
</Select>*/}
<Text>Adi ve soyadi</Text>
</Modal.Body>
<Modal.Footer>
<Button.Group space={2}>
<Button variant="ghost" colorScheme="blueGray" onPress={() => setShowModal(false)} >
Çıkış
</Button>
<Button onPress={() => setShowModal(false)} >
Kaydet
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
and pressable code :
<Box flex="1" >
<Pressable left={290} top="-35" onPress={() => setShowModal(true)}>
<Image size={7} source={require('../assets/clock.png')} />
</Pressable>
</Box>
I try to change pressable but it not working
Try this
Create a component for Model to reuse or use can have it in screen itself.
Modal.js
const Mdal = ({ ...props }) => {
const { onInputChanged, showModal, onClose, header, inputTitle, ...p }
= props;
const [isOpen, setIsOpen] = useState(false);
return (
<Modal
isOpen={showModal}
onClose={onClose}
_backdrop={{
_dark: {
bg: "coolGray.800",
},
bg: "warmGray.50",
}}
>
<Modal.Content borderWidth={2} width="500" maxWidth="93%" maxH="600">
<Modal.CloseButton />
<Modal.Header flexDirection="row">{header}</Modal.Header>
<Modal.Body>
<Text>Your View</Text>
</Modal.Body>
<Modal.Footer background={COLOR.card_action_bg}>
<Button.Group space={2}>
<Button
colorScheme="warmGray"
onPress={() => {
onInputChanged("if any passing value");
}}
>
Save
</Button>
<Button
colorScheme="red"
onPress={() => {
onClose();
}}
>
Cancel
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
);
};
export default Mdal;
In the screen where you want modal :
import { Model } from "the path if it is as component"
const [showModal, setShowModal] = useState(false);
Place it inside your view
<Modal
onInputChanged={onInputChanged}
showModal={showModal}
onClose={() => setShowModal(false)}
header={"(" + ticketId + ") - " + action}
inputTitle={"Reason for transfer"}
/>
onInputChanged - is the function
const onInputChanged = (changedText) => {
//received selected value in changedText
}
change the state of showModal to true on your pressable view(onPress) ->
setShowModal(true);
before installing Formik, my input looked like so:
const [search, setSearch] = useState('');
....
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
name="search"
type="search"
value={search}
onChangeText={(e) => setSearch(e)}
autoCorrect={false}
defaultValue={search}
/>
<Button
disabled={!search}
title="Create"
onPress={(e) => {
createNewCar(e);
}}
/>
</View>
in onChangeText, I would set every character I typed to a state prop called search. With every key that I typed, an API called would be made to get some data from the db.
for example:
if I typed h into the input, the db would return 2 cars honda, hyundai
I read that Formik can simplify a lot of the form setup in React, so I downloaded it, however, the handleChange prop from Formik wants to keep track of values.search
<Formik
initialValues={{
search,
}}
onSubmit={(values) => {
console.log('values', values);
}}>
{({ handleChange, handleSubmit, values }) => (
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
autoCorrect={false}
value={values.search}
onChangeText={(e) => {
handleChange(values.search);
setSearch(e);
}}
/>
<Button
disabled={!search}
title="Create"
onPress={handleSubmit}
/>
</View>
)}
</Formik>
Now I can't type into the form because value is pointing at values.search instead of search like it did originally.
Question
How do I fire setSearch in onChangeText but also add search into the formik values prop?
you can make use of setFieldValue('search', e.target.value) instead of handleChange() change the code to the following:
<Formik
initialValues={{
search,
}}
onSubmit={(values) => {
console.log('values', values);
}}>
{({ handleChange, handleSubmit, values, setFieldValue }) => (
<View style={styles.profileEditContainer__top}>
<TextInput
style={styles.profileEditContainer__form}
autoCapitalize="none"
placeholder="Enter what you want to create.."
placeholderTextColor={Colors.formPlaceHolderDefault}
autoCorrect={false}
value={values.search}
onChangeText={(e) => {
//handleChange(values.search);
setFieldValue('search', e.target.value)
setSearch(e);
}}
/>
<Button
disabled={!search}
title="Create"
onPress={handleSubmit}
/>
</View>
)}
</Formik>
I really tried to make a connection between my react native component and my webview but it doesn't work . Have you any solution ? Here is my code :
let Script = `
document.getElementById("input").addEventListener("focus", function(data)
{alert(data.data)})
`;
render(){
return(
<View>
<WebView
style={{ flex: 1 }}
source={{
html:
'</br></br></br></br><form > <input id="input" class="input"
type="text"
placeholder="Product barcode "/></form>'
}}
keyboardDisplayRequiresUserAction={false} //ios
autoFocus={true} //android
injectedJavaScript={Script1}
automaticallyAdjustContentInsets={false}
allowFileAccessFromFileURLs={true}
scalesPageToFit={false}
mixedContentMode={"always"}
javaScriptEnabled={true}
javaScriptEnabledAndroid={true}
startInLoadingState={true}
onMessage={event => {
alert("HI")
}}
onLoad={() => {}}
/>
<Button
onPress={ this.refs.WEBVIEW_REF.postMessage("Hello from RN");}
title="Scan Barcode"
color="#6495ED"
/>
</View> })
I want just to dispatch the alert after clicking on the button so when i focus the input of the WebView .
you can try wrap webview into TouchableWithoutFeedback
I am passing a variable and a function using props in react native.
<ModalHeader message={'Мои заказы'}
onPress={() => {
goBack();
}} />
In HeaderModel.js
static propTypes = {
onPress: PropTypes.func.isRequired,
message: PropTypes.string
};
render() {
return (
<Header style={styles.header}>
<Left>
<Button rounded transparent onPress={ this.props.onPress }>
<Icon name='arrow-back'/>
</Button>
</Left>
<Body>
{ this.props.message }
</Body>
</Header>
);
}
When I run app, "app is not responding" error appears. What is wrong with my code? Any solutions ?
Just change your ModalHeader to this:
<ModalHeader message={'Мои заказы'} onPress={this.goBack} />
This will pass the goBack function to ModalHeader Class
I have an issue with onChangeText in password input. Detail explanation for what i want to do: I want to disable submit button initially and when both input field filled then enable submit button. If you have any other ways to solve this please share.
<InputGroup style={styles.inputBox}>
<Icon name='ios-person' style={{color: 'white'}}/>
<Input placeholder='Email' style={styles.input}
placeholderTextColor='rgba(255, 255, 255, 0.6)'
value={this.state.username}
onChangeText={(text) => this.setState({username: text})}
onChange={this.onInputChange} />
</InputGroup>
<InputGroup style={styles.inputBox}>
<Icon name='ios-unlock' style={{color: 'white'}}/>
<Input placeholder='Password' style={styles.input}
secureTextEntry={true}
placeholderTextColor='rgba(255, 255, 255, 0.6)'
value={this.state.password}
onChangeText={(text) => this.setState({password: text})}
onChange={this.onInputChange} />
</InputGroup>
<Button block bordered success style={styles.submitButton} onPress={this.onSignIn} disabled={this.state.submitButtonFlag}>
Sign In
</Button>
code for onChangeInput:
onInputChange() {
if (this.state.username != null && this.state.password != null) {
console.log("this.state.submitButtonFlag: ");
this.setState = {submitButtonFlag: false};
console.log(this.state.submitButtonFlag);
}
}
Two errors:
reference with correct this scope: onChange={() => this.onInputChange()} />
setState is a function: this.setState({submitButtonFlag: false});
You need to bind your method that you are calling or use callback like #zvona mentioned
First way
onChange={this.onInputChange.bind(this)}
Second Way
onChange={() => this.onInputChange()}