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 component
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.
npx rn-meter create app
npx rn-meter init
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
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
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
npx rn-meter setup alias
@shopify/react-native-skiareact-native-reanimatednpx rn-meter add piechart1
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>
);
}
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.
npx rn-meter add box
import { Box } from 'rn-meter-component-path';
export default function Example() {
return (
<Box>
<Text style={{ color: 'white' }}>Hello from Box</Text>
</Box>
);
}
npx rn-meter add center
import { Center } from 'rn-meter-component-path';
export default function Example() {
return (
<Center>
<Text style={{ color: 'white' }}>Hello from center</Text>
</Center>
);
}
npx rn-meter add HStack
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>
);
}
npx rn-meter add VStack
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>
);
}
npx rn-meter add divider
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>
);
}
npx rn-meter add alert
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
}
})
npx rn-meter add toast
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
});
npx rn-meter add listview
This List View Fully setup on rtk
<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;
npx rn-meter add button
npx rn-meter add checkbox
npx rn-meter add radio
npx rn-meter add switch
npx rn-meter add input
npx rn-meter add animated input
npx rn-meter add carousal
npx rn-meter add keyboardAvoidingScrollView
npx rn-meter add bottom sheet
This function using for create random string id generation
npx rn-meter add fn random
This function using for reducing color opacity
npx rn-meter add fn cor
This function using for navigation all functions. we can use this out of the component
npx rn-meter add fn nav
// 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"})
This hook provides a complete utility for recording, playing, listing, and managing audio files in your React Native app.
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
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>
);
}
// 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',
},
});
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.
For support, email devrejaul.official@gmail.com
If you have any feedback, please reach out to us at devrejaul.official@gmail.com
Answer 1
Answer 2
FAQs
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 component
We found that rn-meter demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
