1.0.9 • Published 7 years ago
react-native-minimal-settings v1.0.9
React Native Minimal Settings
A cross-platform Settings component for React Native.
Features
- Settings Title
- Category Title
- Switch Button Preference
- Dividing Line
and much more to come!
Demo
Installation
npm i react-native-minimal-settings
Quick Start
import React from 'react';
import { View } from 'react-native';
import {CategoryTitle, DividingLine, SettingTitle, SwitchButton} from 'react-native-minimal-settings';
export default class App extends React.Component {
constructor() {
super();
this.state = {
teslaValue: false,
pizzaValue: false,
}
}
teslaSwitch = (value) => {
this.setState({teslaValue: value});
}
pizzaSwitch = (value) => {
//Unfortunately pizza disappointed me so it's disabled
this.setState({pizzaValue: value});
}
render() {
return (
<View style={{ flex: 1}}>
<SettingTitle
title = {"Settings"}
titleBackgroundColor = {'#746965'}
titleColor = {'white'}
/>
<CategoryTitle
title = {'General'}
/>
<DividingLine
lineColor = {'rgba(128, 128, 128, 0.5)'}
/>
<SwitchButton
title = {'Tesla'}
toggleSwitch = {this.teslaSwitch}
switchValue = {this.state.teslaValue}
description = {"Tesla's is amazing and so is the their Chairman & CEO Elon Musk."}
blockIcon = {"ios-car"}
iconColor = {"red"}
/>
<SwitchButton
title = {'Pizza'}
toggleSwitch = {this.pizzaSwitch}
switchValue = {this.state.pizzaValue}
description = {'Pizzas are very hit or miss, so having your expectations not met kind of sucks.'}
blockIcon = {"md-pizza"}
iconColor = {"skyblue"}
isDisabled = {true}
/>
</View>
);
}
}
API reference
<SettingTitle />
Container component responsible for rendering the screen header.
Example
<SettingTitle
title = {"Settings"}
titleBackgroundColor = {'#1f5fa5'}
titleColor = {'white'}
/>
Props
title
(required): Title of the header.titleBackgroundColor
(required): Background color of the header .titleColor
(required): Color of the header text.
<CategoryTitle />
Container component responsible for rendering the title of a category.
Example
<CategoryTitle
title = {'General'}
/>
Props
title
(required): Title of the category.
Props
title
(required): Title of the header.titleBackgroundColor
(required): Background color of the header .titleColor
(required): Color of the header text.
<DividingLine />
Component responsible for making a line to divide categories or titles from categories.
Example
<DividingLine
lineColor = {'rgba(128, 128, 128, 0.5)'}
/>
Props
lineColor
(required): Dividing line between categories or between title and category.
<SwitchButton />
Container component responsible for rendering the boolean settings block.
Example
<SwitchButton
title = {'Notifications'}
toggleSwitch = {this._handleNotification}
switchValue = {this.state.notificationValue}
description = {'Receive notifications.'}
blockIcon = {"md-notifications"}
iconColor = {"skyblue"}
isDisabled = {false}
/>
Props
title
: Title of the preference block.toggleSwitch
(required): Callback for when the switch button gets toggled.switchValue
(required): Value of the switch button.description
(required): Description of the function of the switch button.blockIcon
(required): Icon of the preference block taken from Expo's vector icon directoryiconColor
(required): The color of the icon.isDisabled
(optional): Disables the entire preference block.