React Native UI Meter Cli

Introducing our comprehensive React Native UI library, designed to streamline your app development process. This library includes customizable App Themes, Cross-platform compatibility for both iOS and Android & web a rich collection of pre-built components, powerful hooks, intuitive form state management, and integrated query handling for efficient data management. With this library, you can create beautiful, functional, and responsive applications effortlessly, providing a seamless and efficient development experience.

Create App With React Native meter

npx rn-meter create app

Initialize cli configuration on existing project

npx rn-meter init

Features

App Theme
Cross platform Universal
Components
Hooks
From state handle
Query support

API Reference

Installation
Configuration
Components
- Layout
  - Box
  - Center
  - HStack
  - VStack
  - Divider
- Typography
  - Text
  - Heading
- From
  - Button
  - CheckBox
  - Radio
  - Switch
  - Input
- Helping UI Components
Animations
- Components
  - Animated Input
- Chart
  - Pie Chart
Utils Function
Native Api Mobile
- Audio
Contributing
Support
Feedback
FAQ
Links
Authors
License

Configuration

Theme Setup

This Command setup your theme related configuration. Like Font, color, radius, etc, also create a meter.config file . You can customize all of this.

npx rn-meter setup theme

Eslint Setup

We are flowing Airbnb style. you can also customize all of role in .eslintrc.json file.

⚠️ WARNING: CRITICAL ACTION REQUIRED! ⚠️
Before running this command, you MUST remove all ESLint-related configuration files like .eslintrc.json and uninstall all ESLint-related packages. Failure to do so WILL cause issues in your project. Proceed with caution!

npx rn-meter setup eslint

Vs Code Configuration Setup

This setup for customizing vs code editor. we can fix all of linting related error passing ctrl+s

⚠️ WARNING: CRITICAL ACTION REQUIRED! ⚠️ Before running this command, you MUST remove all vs code-related configuration files like .vscode/settings.json . Failure to do so WILL cause issues in your project. Proceed with caution!

npx rn-meter setup vscode config

Setup Alias

npx rn-meter setup alias

Animations

Chart

Pie Chart

⚙️ Setup Note:
Make sure you have installed and configured:
- @shopify/react-native-skia
- react-native-reanimated

npx rn-meter add piechart1

View Example

import { Box, PieChartIndex } from 'rn-meter-component-path';

export default function Example() {
  return (
    <Box>
      <PieChartIndex
        data={[
          { value: 100, color: "#d61212", label: "label-01" },
          { value: 200, color: "#d69112", label: "label-02" },
          { value: 200, color: "#1246d6", label: "label-03" }
        ]}
        textTitle="Hello World"
        textValue="$11431"
        SIZE={200}
        BASE_STROKE_WIDTH={25}
      />
    </Box>
  );
}

Components

Introducing our comprehensive React Native UI library with customizable themes, universal components, powerful hooks, efficient form state handling, and integrated query support. Create beautiful, functional, and responsive applications effortlessly.

Layout Components

Box

npx rn-meter add box

View Example

import { Box } from 'rn-meter-component-path';

export default function Example() {
  return (
    <Box>
      <Text style={{ color: 'white' }}>Hello from Box</Text>
    </Box>
  );
}

Center

npx rn-meter add center

View Example

import { Center } from 'rn-meter-component-path';

export default function Example() {
  return (
    <Center>
      <Text style={{ color: 'white' }}>Hello from center</Text>
    </Center>
  );
}

HStack

npx rn-meter add HStack

View Example

import { HStack } from 'rn-meter-component-path';

export default function Example() {
  return (
    <HStack>
      <Box>
        <Text style={{ color: 'white' }}>Hello from HStack</Text>
      </Box>
      <Box>
        <Text style={{ color: 'white' }}>Hello from HStack</Text>
      </Box>
    </HStack>
  );
}

VStack

npx rn-meter add VStack

View Example

import { VStack } from 'rn-meter-component-path';

export default function Example() {
  return (
    <VStack>
      <Box>
        <Text style={{ color: 'white' }}>Hello from VStack</Text>
      </Box>
      <Box>
        <Text style={{ color: 'white' }}>Hello from VStack</Text>
      </Box>
    </VStack>
  );
}

Divider

npx rn-meter add divider

View Example

import { Divider } from 'rn-meter-component-path';

export default function Example() {
  return (
    <Box>
      <Box>
        <Text style={{ color: 'white' }}>Hello from Divider</Text>
      </Box>
      <Divider/>
      <Box>
        <Text style={{ color: 'white' }}>Hello from Divider</Text>
      </Box>
    </Box>
  );
}

Alert

npx rn-meter add alert

View Example

import { AlertContainer, animatedAlert } from 'rn-meter-component-path';

export default function RootComponent() {
  return (
    <Box>
      <AlertContainer />
    </Box>
  );
}

animatedAlert.show({
  message:"Your Message"
}, (value) => {
  if(value==="ok") {
    // write you code
  }
  if(value === 'cancel') {
    // write you code
  }
})

Toast

npx rn-meter add toast

View Example

import { ToastContainer, animatedToast } from 'rn-meter-component-path';

export default function RootComponent() {
  return (
    <Box>
      <ToastContainer />
    </Box>
  );
}

animatedToast.show({
  title: 'User Saved',
  message: 'You account created successfully', 
  bgColor: color.success 
});

Infinity Scroll View

npx rn-meter add listview

This List View Fully setup on rtk

View Example

<ListShow
  header={{
    render:(data) => (<Text>data of header</Text>),
    isScrollable: false,
  }}
  query1={useGetPostsQuery}
  query2={useLazyGetPostsByPageQuery} // this is for pagination
  renderItem={renderItem}
  queryParams={{}}
  selector={(data)=>data?.data?.policies}
  initialNumToRender={10}
  contentContainerStyle={{paddingHorizontal: 0, paddingBottom: 100}}
/>

// rtk api example
// base api 
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: () => ({}),
});

export const homeApi = api.injectEndpoints({
  overrideExisting: true,
  endpoints: (build) => ({
    /**
     * Fetches the first 10 posts from JSONPlaceholder.
     *
     * @returns {ApiResponse<PostItem[]>}
     */
    getPosts: build.query<ApiResponse<PostItem[]>, {}>({
      query: () => '/posts?_page=1&_limit=10',
      transformResponse: (response: PostItem[]): ApiResponse<PostItem[]> => ({
        status: 'success',
        body: response,
      }),
    }),

    /**
     * Fetches paginated posts and appends them to the getPosts cache.
     *
     * @param {page, limit} - Page number and limit for pagination.
     * @returns {ApiResponse<PostItem[]>}
     */
    getPostsByPage: build.query<ApiResponse<PostItem[]>, { page: number; limit: number }>({
      query: ({ page = 1, limit = 10 }) => `/posts?_page=${page}&_limit=${limit}`,
      transformResponse: (response: PostItem[]): ApiResponse<PostItem[]> => ({
        status: 'success',
        body: response,
      }),
      async onQueryStarted(queryArg, { dispatch, queryFulfilled }) {
        try {
          const { data } = await queryFulfilled;
          dispatch(
            homeApi.util.updateQueryData('getPosts', {}, (draft) => {
              if (data?.body && draft?.body && queryArg.page > 1) {
                draft.body.push(...data.body);
              }
            }),
          );
        } catch (err) {
          console.error('Pagination error:', err);
        }
      },
    }),

  })
})
export const {
  useGetPostsQuery,
  useLazyGetPostsByPageQuery
} = homeApi;

From Components

Button

npx rn-meter add button

CheckBox

npx rn-meter add checkbox

Radio

npx rn-meter add radio

Switch

npx rn-meter add switch

Input

npx rn-meter add input

Animated Input

npx rn-meter add animated input

Animated Components

Helping UI Components

Carousal

npx rn-meter add carousal

KeyboardAvoidingScrollView

npx rn-meter add keyboardAvoidingScrollView

Bottom Sheet

npx rn-meter add bottom sheet

Utils Function

Random Id Generator Function

This function using for create random string id generation

npx rn-meter add fn random

Color Opacity Reducer Function

This function using for reducing color opacity

npx rn-meter add fn cor

Navigation

This function using for navigation all functions. we can use this out of the component

npx rn-meter add fn nav

View setup and using Example

// Setup step:01
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from 'Your utils path /nav';
export default function App () {
  <NavigationContainer ref={navigationRef}>
    {/* Your other code */}
  </NavigationContainer>
}
// Setup step:02
// add all screen name type on created nav file 
// like this: export type RouteType =  "screen1" | "screen1"

// Use
nav.navigate('screen-name', {"params"})
nav.push('screen-name', {"params"})
nav.pop('screen-name', {"params"})
nav.back('screen-name')
nav.reset('screen-name', {"params"})
nav.replace('screen-name', {"params"})

Native Api Mobile

Audio

This hook provides a complete utility for recording, playing, listing, and managing audio files in your React Native app.

🔧 Libraries Used

🎙️ react-native-audio-record – Record audio with native support.
🔓 react-native-permissions – Handle runtime permissions easily.
🔊 react-native-sound-player – Play audio from local or remote sources.

Install the required dependencies and setup flowing library instructions

npm install react-native-audio-record react-native-permissions react-native-sound-player

npx rn-meter add audio record

View Example

Using Example (`App.tsx`)

  // Provide audio provider 
  import React from 'react';
  import AudioProvider from './src/AudioProvider';
  import Audio from './src/Audio';

  export default function App() {
    return (
      <AudioProvider>
        <Audio/>
      </AudioProvider>
    );
  }

Audio.tsx

// use like this 
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React from 'react';
import useAudio from './useAudio';

export default function Audio() {
   const {startRecording,stopRecording, playRecording, stopPlayer, getAllRecording, getLastRecording, deleteAllRecording, deleteRecordingById} = useAudio();

  return (
    <View style={styles.container}>
        <TouchableOpacity
        // disabled={isRecording}
        // style={{opacity: isRecording ? 0.7 : 1}}
        onPress={startRecording}
        >
        <Text style={styles.btn}>Start</Text>
        </TouchableOpacity>

        <TouchableOpacity
        // disabled={!isRecording}
        // style={{opacity: !isRecording ? 0.7 : 1}}
        onPress={stopRecording}>
        <Text style={styles.btn}>Stop</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={()=>playRecording()}>
            <Text style={styles.btn}>Play</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={stopPlayer}>
            <Text style={styles.btn}>Stop Player</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={getAllRecording}>
            <Text style={styles.btn}>get all recording</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={getLastRecording}>
            <Text style={styles.btn}>get last recording</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={deleteAllRecording}>
            <Text style={styles.btn}>delete all recording</Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={()=>deleteRecordingById('recorder-salespype-1744540057355.wav')}>
            <Text style={styles.btn}>delete recording by id</Text>
        </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container:{
    flex:1,justifyContent:'center',alignItems:'center', gap: 10,
  },
  btn:{
    backgroundColor:'blue', paddingHorizontal: 10, paddingVertical: 5, color:'#fff',fontWeight:'bold',
  },
});

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Support

For support, email [email protected]

Feedback

If you have any feedback, please reach out to us at [email protected]

FAQ

Question 1

Answer 1

Question 2

Answer 2

🔗 Links

Authors

@rezaulkarim

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 90 Commits
.github/workflows		.github/workflows
.vscode		.vscode
AwesomeApp		AwesomeApp
app		app
example		example
nativeCli		nativeCli
screenshots		screenshots
src		src
.gitignore		.gitignore
README.md		README.md
app.d.ts		app.d.ts
node.txt		node.txt
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsup.config.ts		tsup.config.ts

DeveloperRejaul/rn-meter-cli

Folders and files

Latest commit

History

Repository files navigation

React Native UI Meter Cli

Create App With React Native meter

Initialize cli configuration on existing project

Features

API Reference

Configuration

Theme Setup

Eslint Setup

Vs Code Configuration Setup

Setup Alias

Animations

Chart

Pie Chart

Components

Layout Components

Box

Center

HStack

VStack

Divider

Alert

Toast

Infinity Scroll View

From Components

Button

CheckBox

Radio

Switch

Input

Animated Input

Animated Components

Helping UI Components

Carousal

KeyboardAvoidingScrollView

Bottom Sheet

Utils Function

Random Id Generator Function

Color Opacity Reducer Function

Navigation

Native Api Mobile

Audio

🔧 Libraries Used

Using Example (App.tsx)

Audio.tsx

Contributing

Support

Feedback

FAQ

Question 1

Question 2

🔗 Links

Authors

License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases 10

Packages 0

Uh oh!

Contributors 2

Uh oh!

Languages

Using Example (`App.tsx`)

Packages