A SDK from building react native apps
yarn add @danielsrs/react-native-sdkimport { SdkProvider } from '@danielsrs/react-native-sdk';
export default function App() {
return (
<SdkProvider>
{/* App content */}
</SdkProvider>
);
}The use any of the components and APIs:
Styled
Create styled components. Makes code ease to read
| Code | Result |
|---|---|
import { View } from 'react-native';
import { Styled } from '@danielsrs/react-native-sdk';
export function StyledExample() {
return (
<View>
<RedSquare />
</View>
);
}
const RedSquare = Styled.createStyledView({
width: 100,
height: 100,
backgroundColor: 'rgba(255, 0, 0, 0.3)',
}); |
|
ZStack
Position children in a z stack
| Code | Result |
|---|---|
import { useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import { Styled, ZStack } from '@danielsrs/react-native-sdk';
export function ZStackS() {
const viewRef = useRef<View>(null);
return (
<ZStack
ref={viewRef}
style={{
// You need to set the ZStack height someway,
// Otherwise, nothing will be visible!!
height: 120,
// flex: 1,
// height: '100%',
// flexGrow: 1,
}}>
<RedSquare />
<GreenSquare />
<BlueSquare />
</ZStack>
);
}
const RedSquare = Styled.createStyledView({
width: 100,
height: 100,
backgroundColor: 'rgba(255, 0, 0, 0.3)',
});
const GreenSquare = Styled.createStyledView({
width: 100,
height: 100,
marginTop: 10,
marginLeft: 10,
backgroundColor: 'rgba(0, 255, 0, 0.3)',
});
const BlueSquare = Styled.createStyledView({
width: 100,
height: 100,
marginTop: 20,
marginLeft: 20,
backgroundColor: 'rgba(0, 0, 255, 0.3)',
}); |
|
AppBackground
Note
TODO usage instructions
Button
Note
TODO usage instructions
Checkbox
Note
TODO usage instructions
ColorPicker
Note
TODO usage instructions
Slider
Note
TODO usage instructions
Text
Note
TODO usage instructions
ToggleButton
Note
TODO usage instructions
useColors
Note
TODO usage instructions
useColorSheme
Note
TODO usage instructions
useSchemeControl
Note
TODO usage instructions
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library