A simple, easy to use, and beautiful keypad component for react native
run it your self using yarn example [ios/andriod]
npm install react-native-simple-keypad
or
yarn add react-native-simple-keypad
![](https://private-user-images.githubusercontent.com/54312831/263727312-b5997247-b0c9-4519-8ba3-7e577c5e5a72.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg0MzEyMzIsIm5iZiI6MTcxODQzMDkzMiwicGF0aCI6Ii81NDMxMjgzMS8yNjM3MjczMTItYjU5OTcyNDctYjBjOS00NTE5LThiYTMtN2U1NzdjNWU1YTcyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjE1VDA1NTUzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM4NGQ5ZTUxM2VhOTM1OTczMGVhOWUzODIxMzYxYzA2ZTY5NDk4ZmUwYWQzOGM4Y2U3ZmMxMjVhOTNlNDA4YTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.VkMRARRYbgdxXicw26rnSQRLlRwe39mHkhLappAtxjA)
import * as React from 'react';
import { View } from 'react-native';
import Keypad from 'react-native-simple-keypad';
export default function App() {
return (
<View style={{ justifyContent: 'center', height: '100%' }}>
<Keypad
onKeyPress={(value) => console.log(`${value} is pressed`)}
textStyle={{ fontWeight: '600', fontSize: 30 }}
backspaceIconFillColor="#000000"
backspaceIconStrokeColor="#FFFFFF"
bioMetricFillColor="#000000"
backspaceIconHeight={24}
backspaceIconWidth={33}
bioMetricIconHeight={28}
bioMetricIconWidth={28}
onBioAuthPress={() => console.log('Bio Auth')}
/>
</View>
);
}
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library