dev-as-speed
Speed up your development with dev-as-speed
Welcome to dev-as-speed! This package provides a versatile re-usable components which covers most of the common used components and utilities in the react-native ,There are many solutions or components for React Native applications development, offering a ThemeProvider
component and a useTheme
hook to manage themes.
Installation
To install the package, use:
npm install dev-as-speed
# or
yarn add dev-as-speed
Usage - App.js
import React from 'react';
import { ThemeProvider, useTheme } from 'dev-as-speed';
import { View, Text, TouchableOpacity } from 'react-native';
const App = () => {
// define your custom colors for both the theme
const customLightTheme = {
// Customized properties for light theme
primaryColor: '#FF9900',
secondaryColor: '#00FF99',
// Additional properties...
};
const customDarkTheme = {
// Customized properties for dark theme
primaryColor: '#9900FF',
secondaryColor: '#FF0099',
// Additional properties...
};
return (
<ThemeProvider customLightTheme={customLightTheme} customDarkTheme={customDarkTheme}>
<MainApp />
</ThemeProvider>
);
};
const MainApp = () => {
const { currentTheme } = useTheme();
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: currentTheme.backgroundColor }}>
<Text style={{ color: currentTheme.textColor }}>Theme Example</Text>
<TouchableOpacity onPress={toggleTheme}>
<Text>Toggle Theme</Text>
</TouchableOpacity>
</View>
);
};
export default App;
Theme Specification
-
The
ThemeProvider
component allows you to manage themes within your React Native application. It provides flexibility by accepting custom theme properties for both light and dark themes. -
useTheme
hook provide the properties for the theme utilization
- currentTheme - to get the current theme properties / colors
- theme - to check the current enable theme
Default Theme colors
lightTheme
export const lightTheme = {
primaryColor: '#3498db',
secondaryColor: '#2ecc71',
textColor: '#333', // Common text color for light theme
backgroundColor: '#FFF', // Common background color for light theme
};
darkTheme
export const darkTheme = {
primaryColor: '#9b59b6',
secondaryColor: '#e74c3c',
textColor: '#DDD', // Common text color for dark theme
backgroundColor: '#111', // Common background color for dark theme
// Other dark theme properties
};
Network connection
If you want to use network connectivity you need to add peer dependency :
npm install @react-native-community/netinfo
# or
yarn add @react-native-community/netinfo
NetworkProvider
- App.js
After add ...
import {ThemeProvider,NetworkProvider} from 'dev-as-speed'
export default function App() {
return (
<ThemeProvider customLightTheme={customLightTheme} customDarkTheme={customDarkTheme}>
<NetworkProvider>
<MainNavigator />
</NetworkProvider>
</ThemeProvider>
);
}
Usage -
import React from 'react';
import { useNetwork } from 'dev-as-speed';
import { View, Text, TouchableOpacity } from 'react-native';
const ComponentA = () => {
const {network} = useNetwork()
return (
<View>
<Text>{network}</Text>
</View>
);
};
export default Component;