react-native-metamask-phrase-backup

A simple and fully customizable React Native component that implements a metamask phrase backup.

• Fully customizable buttons and display selected value area

Metamask UI Example

React Native Metamask Phrase Backup Example	React Native Metamask Phrase Backup Example	React Native Metamask Phrase Backup Example

Installation

If using yarn:

yarn add react-native-metamask-phrase-backup

If using npm:

npm i react-native-metamask-phrase-backup

Usage

import { PhraseBackup } from 'react-native-metamask-phrase-backup';

Simply place a <PhraseBackup /> tag.

<View style={{flex: 1}}>
  <PhraseBackup data={data} onChange={onChangeSelectedValue}/>
</View>

Cusomize Display Selected Area

Cusomize display selected area is fully customizable using the isHaveDisplayValue, value props.

const data = ['relationship', 'thanksgiving', 'professional', 'organization', 'sporadically', 'intimidating', 'abolitionist', 'onomatopoeia', 'appreciation', 'annunciation', 'malnutrition', 'architecture'];
const [displayArr, setDisplayArr] = useState(Array.from({ length: 12 }, (_, i) => i + 1));
const [value, setValue] = useState(null);
const handleSelect = (value) => {
  setDisplayArr(value);
}

const result = () => {
  Alert.alert(
    'Complete Phrase Backup',
    displayArr.toString().replaceAll(',', ', '),
    [
      { text: 'Done' },
    ],
  )
}

return <View style={styles.container}>
  <Text style={[styles.description, { fontSize: 20 }]}>React Native Metamask Phrase Word Example</Text>
  <Text style={styles.description}>Select each word in the order it was presented to you.</Text>
  <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap', marginBottom: 30 }}>
    {displayArr.map((item, index) => (
      <View key={index} style={[styles.displayItemContainer]}>
        <Text style={{ marginRight: 3 }}>{index + 1}.</Text>
        <TouchableOpacity
          style={typeof item === 'string' ? styles.displaySelectedButton : styles.displayButton}
          onPress={() => typeof item === 'string' && setValue(item)}
        >
          <Text style={styles.buttonText}>{typeof item === 'string' && item}</Text>
        </TouchableOpacity>
      </View>
    ))}
  </View>
  <PhraseBackup isHaveDisplayValue={false} data={data} seeds={12} onChange={handleSelect} value={value}/>
  <TouchableOpacity style={{ width: 320, height: 40, borderWidth: 1, borderColor: '#000', borderRadius: 18, marginTop: 20, alignItems: 'center', justifyContent: 'center' }} onPress={result}>
    <Text style={{ fontWeight: '500' }}>Complete Backup</Text>
  </TouchableOpacity>
</View>;

Documentation

Changelog

Version 1.0.2

• Allow show/hide display selected area and you can customize that area.
• Update README.md

Phrase Backup Component

Name	Description	Default	Type
data	The data of phrase backup string	REQUIRED	Array
seeds	Total of phrase backup words	12	number
value	Just need value when you hide display selected area isHaveDisplayValue = false	OPTIONAL	string
isHaveDisplayValue	Show/Hide display seletected area, when you want to custom your display area	TRUE	boolean
onChange	To get the selected string array	null	function
containerStyle	The wrapper style of component	null	Object
displaySelectedWrapperStyle	Style applied to the wrapper display seletected container	null	Object
displaySelectedStyle	Style applied to the display seletected container	null	Object
displaySelectedItemRowStyle	Style applied to the display selected item row	null	Object
displaySelectedButtonStyle	Style applied to the display selected button container	null	Object
displayButtonTextStyle	Style applied to the display selected button text	null	Object
selectedButtonStyle	Style applied to the selected button container	null	Object
buttonTextStyle	Style applied to the selected button text	null	Object

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Author

Huy Pham

License

MIT