react-native-newestapps-hooks
v1.0.5
Published
Smart hooks
Downloads
7
Readme
react-native-newestapps-hooks
Helper hooks
Documentation
Full documentation in react-native.newestapps.com.br
Installation
Install peer dependencies if needed. (and link them)
npm install @react-native-community/hooks react-native-safe-area-context @react-native-async-storage/async-storage --save
npx react-native link react-native-safe-area-context
npx react-native link @react-native-async-storage/async-storage
Install newestapps hooks (no link needed)
npm install react-native-newestapps-hooks --save
Responsive hooks
Responsive hooks combine some libs and some checks, according to platform and screen changes. Is usefull for pixel perfect apps that we build.
import {
ResponsiveContext,
useResponsive,
} from 'react-native-newestapps-hooks';
const HomeScreen: React.FC = () => {
const responsive = useResponsive(); // Must be inside ResponsiveContext
return (
<Text>
Screen width is: {responsive.screenWidth} and Window width is{' '}
{responsive.windowWidth}
</Text>
);
};
const App: React.FC = () => {
return (
<ResponsiveContext>
<HomeScreen />
</ResponsiveContext>
);
};
export default App;
Preference hooks
Preference hooks uses async storage, for fast component-level prefs change. Built based on useState usage.
import { Text, Button } from 'react-native';
import {
PreferenecContext,
usePreference,
usePreferences,
useJsonPreference,
} from 'react-native-newestapps-hooks';
const ProfileScreen: React.FC = () => {
const [user, setUser] = useJsonPreference('user'); // must use useJsonPreference if dealing with JSON, and you want it to be parsed correctly on fetch. (it will always be an object or array)
const [theme, setThemePref] = usePreference('myDesiredTheme', 'light'); // Sets theme pref for our app. NOTE: second parameter, is a default value, in case the pref was not saved before.
const [deviceId, setDeviceId] = usePreference('myDeviceId');
/**
* This describes all functions that is returned for each preference.
*
* count = is the actual value for the pref
* setCount = updates the actual value
* getCount = forces getting the count value from disc (and does not reload state)
* incrementCount = very useful when dealing with incrementable values (always integers for now).
* decrementCount = very useful when dealing with decrementable values (always integers for now).
*/
const [
count,
setCount,
getCount,
incrementCount,
decrementCount,
] = usePreference('count', 0);
React.useEffect(() => {
/**
* Note second parameter is TRUE, that is the "saveOnce" functionality, and it will
* save this preference with this value ONCE, and will never change the value if saveOnce
* is TRUE. You can override value or force, setting this to FALSE (which is default FALSE).
*/
setDeviceId('[some-unique-device-id-here]', true);
}, []);
return (
<>
<Text>{user ? 'Please sign-in' : `Hello ${user.name}!`}</Text>
<Button onPress={incrementCount}>+1</Button>
<Button onPress={decrementCount}>-1</Button>
</>
);
};
const App: React.FC = () => {
return (
<PreferenceContext>
<ProfileScreen />
</PreferenceContext>
);
};
export default App;
Network hooks
Responsive hooks combine some libs and some checks, according to platform and screen changes. Is usefull for pixel perfect apps that we build.
import { NetworkContext, useNetwork } from 'react-native-newestapps-hooks';
const HomeScreen: React.FC = () => {
const network = useNetwork(); // Must be inside ResponsiveContext
return (
<Text>
{network.isConnected
? 'You are connected to the internet'
: 'You are offline!'}
</Text>
);
};
const App: React.FC = () => {
return (
<NetworkContext>
<HomeScreen />
</NetworkContext>
);
};
export default App;
License
MIT