DOCSEARCHbyAlgolia
Submit Docs

rn-nativeflow Documentation

website·Indexed 29 days ago

https://rn-nativeflow-docs.onrender.com

A library of pre-styled React Native components that can be easily customized using props. Includes components such as Button, Check Box, Dialog, Menu, Avatar, UserInput, and layout tools like Stack (V and H) and Grid. Documentation covers version 1.0.0 and the upcoming Next version.

Tokens
14.9K
Snippets
86
Records
90
Agent score
46%

What's inside rn-nativeflow

  1. Overview of rn-nativeflow features

    rn-nativeflow is a framework designed for rapid application development with a focus on three core pillars: ease of installation and setup, built-in responsiveness where components automatically adapt to different screen sizes, and high customizability allowing developers to modify components to meet specific project requirements.

  2. Setup PortalProvider for Menu usage

    To use the Menu component, the application must be wrapped with the PortalProvider and NativeProvider components in the root file (e.g., app.js).
    import { PortalProvider, NativeProvider } from 'rn-nativeflow';
import Component from './path';

const App = () => {
    return (
        <NativeProvider>
            <PortalProvider>
                <Component/>
            </PortalProvider>
        </NativeProvider>
    )
}
export default App;

  3. Setup PortalProvider for Dialog usage

    To use the Dialog component, you must wrap your application root (e.g., app.js) with the PortalProvider and NativeProvider components from rn-nativeflow.
    import { PortalProvider, NativeProvider } from 'rn-nativeflow';
import Component from './path';

const App = () => {
    return (
        <NativeProvider>
            <PortalProvider>
                <Component/>
            </PortalProvider>
        </NativeProvider>
    )
}
export default App;

  5. Setup PortalProvider for Dialog usage

    To use the Dialog component in rn-nativeflow, the application root must be wrapped with the PortalProvider and NativeProvider components.
    import { PortalProvider, NativeProvider } from 'rn-nativeflow';
import Component from './path';

const App = () => {
    return (
        <NativeProvider>
            <PortalProvider>
                <Component/>
            </PortalProvider>
        </NativeProvider>
    )
}
export default App;

  6. Install rn-nativeflow and required dependencies

    To use rn-nativeflow v1.0.0, you must install the core library along with react-native-reanimated and react-native-gesture-handler.
    npm install rn-nativeflow react-native-reanimated react-native-gesture-handler

  7. Setup PortalProvider for rn-nativeflow Menu

    To use the Menu component, you must wrap your application (typically in app.js) with the PortalProvider and NativeProvider components.
    import { PortalProvider, NativeProvider } from 'rn-nativeflow';
import Component from './path';

const App = () => {
    return (
        <NativeProvider>
            <PortalProvider>
                <Component/>
            </PortalProvider>
        </NativeProvider>
    )
}
export default App;

  8. MenuItem and MenuItemLabel configuration reference

    Configuration options for individual menu items and their labels.

    MenuItem Props

    PropTypeDefaultDescription
    paddingVnumber12Vertical padding on the menuItem
    paddingHnumber15Horizontal padding on the menuItem
    gapnumber10Gap between children of the menuItem
    styleobject-Custom styles for the menuItem container

    MenuItemLabel Props

    PropTypeDefaultDescription
    fsnumber12Font size of the MenuItemLabel
    styleobject-Custom styles for the MenuItemLabel

  9. Configure Babel plugin for react-native-reanimated

    Add the react-native-reanimated/plugin to the plugins array in your babel.config.js file. Ensure it is added to the plugins section and not the presets section.
    module.exports = {
  presets: [
    // ...
  ],
  plugins: [
    // ...
    'react-native-reanimated/plugin',
  ],
};

  10. Configure Babel plugin for react-native-reanimated

    Add the react-native-reanimated/plugin to the plugins array in your babel.config.js file. Ensure it is added to the plugins section and not the presets section.
    module.exports = {
  presets: [
    // ...
  ],
  plugins: [
    // ...
    'react-native-reanimated/plugin',
  ],
};