Mecute Design Module for ReactNative
peer dependency
- react-native: 0.68.1
How to install
npm install @mecute/design
<!-- for iOS -->
cd ios && pod install
StyleButton
import React from 'react';
import { View } from "react-native";
import { StyleButton } from "@mecute/design";
function App () {
const handleButtonPress = () => {
console.log("Button Pressed!");
};
return (
<View>
<StyleButton
theme="gray"
type="enabled"
size="xl"
onPress={handleButtonPress}
pressOption={["debounce", 250]} // throttle, debounce feature with duration
buttonStyle={{ backgroundColor: "blue" }} // custom button style
textStyle={{ color: "red" }} // custom text style
>
TEXT HERE
</StyleButton>
</View>
)
};
export default App;
Switch
import React, { useState } from 'react';
import { View } from "react-native";
import { Switch } from "@mecute/design";
function App() {
const [checked, setChecked] = useState<boolean>(false);
return (
<Switch
checked={checked}
setChecked={setChecked}
scale={1}
/>
);
};
export default App;
Skeleton
Skeleton UI Pages
- <Skeleton.Profile />
- <Skeleton.ListView />
- <Skeleton.DetailView />
import React, { useState } from 'react';
import { View } from "react-native";
import { Skeleton } from "@mecute/design";
function App() {
const [isLoading, setIsLoading] = useState<boolean>(false);
...
return (
...
{isLoading && <Skeleton.ListView />}
);
};
export default App;