Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
react-native-connected-inputs
Advanced tools
A React Native hook and HOC to connect inputs with navigation and submission handling.
@gfean/react-native-connected-input
lets you connect your text inputs with each other in the react-native app.
The package contains a react native custom hook and a HOC to manage smooth navigation thorugh inputs and submission handling.
This package is pure and has no peer dependencies, making it lightweight and easy to integrate into any React Native project.
It uses base React Native components and is compatible with any kind of TextInput
which accepts refs.
Install the package using npm or yarn:
npm install react-native-connected-inputs
or
yarn add react-native-connected-inputs
The useConnectedInputs
hook allows you to connect multiple inputs, automatically managing focus (as well as the focus order) and submission.
import React from 'react';
import { SafeAreaView, TextInput, StyleSheet, Alert } from 'react-native';
import { useConnectedInputs } from 'react-native-connected-inputs';
const App: React.FC = () => {
const handleFormSubmit = () => {
Alert.alert('Form Submitted');
};
const connectInput = useConnectedInputs(handleFormSubmit);
return (
<SafeAreaView style={styles.container}>
<TextInput style={styles.input} placeholder="First Input" {...connectInput(0)} />
<TextInput style={styles.input} placeholder="Second Input" {...connectInput(1)} />
<TextInput style={styles.input} placeholder="Third Input" {...connectInput(2)} />
<TextInput style={styles.input} placeholder="Fourth Input" {...connectInput(3)} />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
marginBottom: 10,
width: '80%',
},
});
export default App;
import React from 'react';
import { SafeAreaView, TextInput, StyleSheet, Alert, Text } from 'react-native';
import { ConnectedInputs } from 'react-native-connected-inputs';
const App: React.FC = () => {
const handleFormSubmit = () => {
Alert.alert('Form Submitted');
};
return (
<SafeAreaView style={styles.container}>
<ConnectedInputs onSubmit={handleFormSubmit}>
<TextInput style={styles.input} placeholder="First Input" />
<Text>Hi there</Text>
<TextInput style={styles.input} placeholder="Second Input" />
<TextInput style={styles.input} placeholder="Third Input" />
<TextInput style={styles.input} placeholder="Fourth Input" />
</ConnectedInputs>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
input: {
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
marginBottom: 10,
width: '80%',
},
});
export default App;
Similarly to useConnectedInputs
hook and ConnectedInputs
HOC, useConnectedInputsContext
hook provides a way to manage multiple TextInput components in a React Native application, ensuring seamless navigation and submission handling. It is designed to manage the connection of TextInput components across different parts of your component tree, ensuring that focus navigation and submission logic work seamlessly regardless of where the inputs are located.
RegistrationScreen Component:
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import RegistrationForm from './RegistrationForm';
import { ConnectedInputsProvider } from 'react-native-connected-inputs';
const RegistrationScreen: React.FC = () => {
return (
<ConnectedInputsProvider>
<SafeAreaView style={styles.container}>
<RegistrationForm />
</SafeAreaView>
</ConnectedInputsProvider>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 16,
},
});
export default RegistrationScreen;
RegistrationForm Component:
import React, { useEffect } from 'react';
import { View, StyleSheet, Button, Alert } from 'react-native';
import PersonalDetails from './PersonalDetails';
import AccountDetails from './AccountDetails';
import { useConnectedInputsContext } from 'react-native-connected-inputs';
const RegistrationForm: React.FC = () => {
const { handleSubmit } = useConnectedInputsContext();
const onSubmit = () => {
Alert.alert('Registration Submitted');
};
useEffect(() => {
handleSubmit(onSubmit);
}, [handleSubmit]);
return (
<View style={styles.container}>
<PersonalDetails />
<AccountDetails />
<Button title="Submit" onPress={onSubmit} />
</View>
);
};
const styles = StyleSheet.create({
container: {
width: '100%',
padding: 16,
},
});
export default RegistrationForm;
PersonalDetails Component
import React from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
import { useConnectedInputsContext } from 'react-native-connected-inputs';
const PersonalDetails: React.FC = () => {
const {connectInput} = useConnectedInputsContext();
return (
<View style={styles.container}>
<TextInput style={styles.input} placeholder="First Name" {...connectInput(0)} />
<TextInput style={styles.input} placeholder="Last Name" {...connectInput(1)} />
</View>
);
};
const styles = StyleSheet.create({
container: {
marginBottom: 16,
},
input: {
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
marginBottom: 10,
width: '100%',
},
});
export default PersonalDetails;
AccountDetails Component
import React from 'react';
import { View, StyleSheet, TextInput } from 'react-native';
import { useConnectedInputsContext } from 'react-native-connected-inputs';
const AccountDetails: React.FC = () => {
const {connectInput} = useConnectedInputsContext();
return (
<View style={styles.container}>
<TextInput style={styles.input} placeholder="Email" {...connectInput(2)} />
<TextInput style={styles.input} placeholder="Password" {...connectInput(3)} secureTextEntry />
</View>
);
};
const styles = StyleSheet.create({
container: {
marginBottom: 16,
},
input: {
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
marginBottom: 10,
width: '100%',
},
});
export default AccountDetails;
Example usage above shows how you can use useConnectedInputsContext
to manage inputs navigation across different parts of your component tree.
Keep in mind, that this needs ConnectedInputsProvider
to work. Do not wrap your whole application inside this provider to avoid the unexpected behaviour, use it as a wrapper to the specific form component or screen.
A hook to manage connected inputs.
onSubmit
(optional): A callback function to be called when the last input is submitted.
A function to connect an input, which takes the order of the input as an argument and returns props to be spread onto the input.
A higher-order component to manage connected inputs.
children
: The input components to be connected.onSubmit
(optional): A callback function to be called when the last input is submitted.You can wrap this around other elements than TextInputs as well, as given in the example above - this will type check for TextInput component and won't create additional refs for any other type of components.
A context provider component to manage the state and logic for connected inputs across multiple components.
A hook to access the connected inputs context. This hook provides methods for registering inputs, connecting inputs, and handling form submission. It must be used within a ConnectedInputsProvider
.
registerInput
: A function to register an input.connectInput
: A function to connect an input, which takes the order of the input as an argument and returns props to be spread onto the input.handleSubmit
: A function to set the submission handler for the form.This package will only help you to connect TextInputs, manage navigation and submission handling as well as the returnKeyType
. This is not responsible for keyboard avoiding views, but it works well with different community packages which manage keyboards.
Contributions are welcome! If you find any issues or would like to suggest improvements, please create a new issue or submit a pull request.
This project is licensed under the ISC License.
No dependencies.
FAQs
A React Native hook and HOC to connect inputs with navigation and submission handling.
The npm package react-native-connected-inputs receives a total of 7 weekly downloads. As such, react-native-connected-inputs popularity was classified as not popular.
We found that react-native-connected-inputs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.