phoenix-rn-helper
TypeScript icon, indicating that this package has built-in type declarations

0.4.4 • Public • Published

phoenix-rn-helper

Notice: Some components relias on the some specific packages. Make sure to install them first to things to work. Full list of packages can be found here.

index

  1. Divider
  2. ColorSelector
  3. CheckBox
  4. ThemeToggler
  5. TouchHere

Divider

This Component adds the pure line throughout the whole width. Example:

<Divider size={2} color="black" margin={10} />

Screenshot TODO://

Option Type Required Default Description
size Number No StyleSheet.hairlineWidth (Very thin) Height of Divider
color String No grey Color of the Divider
margin Number No 0 Space left on both horizontal ends

ColorSelector

This component provides one little button alike which opens color pallate Model to choose color.

Warning: You need to install react-native-color-picker as a dependancies for this to work.

Example:

<ColorSelector
  value={flowerColor}
  onChange={(color) => setFlowerColor(color)}
  style={
    {
      // Additional styles
    }
  }
/>

Screenshot: TODO://

Option Type Required Default Description
value Color String Yes None The value to represent color
onChange Function: color No? None Function to be called each time color changes
style style object No 30x30 square with some border radius A style object to change the appearance of the button.

Although style prop is allowed, backgroundColor will always be current color value.

CheckBox

This component is simple checkbox. By default it gives retro ✔️ and vibe. But it is completely customizable.

Example:

<CheckBox
  value={check}
  onChange={(e) => setCheck(e)}
  boxStyle={{
    borderRadius: 0,
    borderWidth: 2,
    borderColor: "black",
  }}
  TrueComponent={() => <Text>T</Text>}
  FalseCoponent={() => <Text>F</Text>}
/>

Notice: To render custom components ( TrueComponent & FalseComponent) You have to provide both component. Providing One component will result in default render.

Screenshot: TODO://

Option Type Required Default Description
value Boolean Yes none The boolean value to control the checkbox
onChange Function: value Yes none Function that will be called with updated boolean value
boxStyle style object No { width: 30,height: 30,borderRadius: 10,backgroundColor: "lightgrey", borderWidth: 1, borderColor: "black", alignItems: "center", justifyContent: "center", } Outer Box styling. Keep in mind that deafult style will be applied first and then custom style
TrueComponent React-Native component No none Component to render when checkbox value is true
FalseComponent React-Native component No none Component to render when checkbox value is false

ThemeToggler

This component provides theme toggler with smooth animation inspired from Telegram's theme toggler button.

Warning: You need to install react-native-svg and react-native-reanimated (v2) as a dependancies for this to work.

Example:

<ThemeToggler
  value={theme}
  onChange={(newTheme) => setTheme(newTheme)}
  boxStyle={{ backgroundColor: "blue" }}
  duration={700} // defaults to 1000(1 second)
  sunColor="#ff0"
  moonColor="#fff"
/>

Screenshot: TODO://

Option Type Required Default Description
value "light" | "dark" Yes none String value that contains current theme value
onChange Function: ("light" | "dark") Yes none Function that will be called each time theme changes
duration Number No 1000 Duration of animation
boxStyle style object No { width: 60, height: 60, borderRadius: 100, backgroundColor: "#2155ff", padding: 5, alignItems: "center", justifyContent: "center" } Style object for main container. Make sure to have proper backgroundColor reltive to sunColor and moonColor
sunColor Color No #fff Color of sun (light theme indicator)
moonColor Color No #fff Color of moon (dark theme indicator)

TouchHere

Warning: This component is not perfect. It is based on Modal component of react-native which is not that much good.

This component shows a hand indicating your user to that they have to touch here. This is generaly used on onboarding page but can be used anywhere.

You have to provide absolute value of point to be shown to click. You generally want to use useLayout hook to calculate where your target element is. This is one of the drawback of this component. I might add custom component based but can't promise.

Warning: You need to install react-native-svg and react-native-reanimated (v2) as a dependancies for this to work.

Example:

<TouchHere
  x={120}
  y={70}
  visible={touchIndicator}
  onRequestClose={() => setTouchIndicator(false)}
  duration={4000}
  delay={2000}
  handColor="white"
  ringColor="black"
/>

Screenshot: TODO://

Option Type Required Default Description
visible Boolean Yes none The control variable to show the modal. recomended to set true in start and use delay prop to adjust timing
onRequestClose Function Yes none Function that will be called on closing of component.
x Number Yes 100 X cordination of touch to be shown
y Number Yes 100 Y cordination of touch to be shown
duration Number No 3500 Duration of the whole animation includes both hand down and waves so make sure to have higher value
delay Number No 0 How much time after animation should be shown. Generally you want to wait for the user to touch on desired location and if not touched then show this so you can use delay property for that
handColor Color No #fff Color of hand. It is just outline like color. Whole hand won't be filled with this color because it is better to show as much as background to user as possible
ringColor Color No #fff Color of waves. Currently 2 waves will be shown.

External-packages

  • react-native-color-picker (ColorSelector)
  • react-native-reanimated@^2.1.0 (ThemeToggler, TouchHere)
  • react-native-svg (ThemeToggler, TouchHere)

Quick all install

npm i react-native-color-picker react-native-reanimated react-native-svg

OR

yarn add react-native-color-picker react-native-reanimated react-native-svg

/phoenix-rn-helper/

    Package Sidebar

    Install

    npm i phoenix-rn-helper

    Weekly Downloads

    1

    Version

    0.4.4

    License

    MIT

    Unpacked Size

    34.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • phoenixcreation