Skip to content

Commit

Permalink
Merge pull request #9 from rcaferati/review-demo-and-docs
Browse files Browse the repository at this point in the history
Reviewed demo and docs
  • Loading branch information
rcaferati authored Feb 16, 2019
2 parents f4156fe + 3a13e80 commit 27cb248
Show file tree
Hide file tree
Showing 26 changed files with 595 additions and 167 deletions.
3 changes: 3 additions & 0 deletions .expo/packager-info.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"devToolsPort": 19002
}
7 changes: 7 additions & 0 deletions .expo/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"hostType": "lan",
"lanType": "ip",
"dev": true,
"minify": false,
"urlRandomness": null
}
64 changes: 44 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,6 @@ Run the <a target="_blank" title="Live Demo" href="https://expo.io/@rcaferati/re
npm install --save react-native-really-awesome-button
```

or

```
yarn add react-native-really-awesome-button
```

## Usage

### Basic
Expand Down Expand Up @@ -80,33 +74,63 @@ function Button() {
}
```

### Extra Content placement
You can use the `Extra Content` prop to render a component inside the button content body. This could be useful to render an image or gradient background

```jsx
import AwesomeButton from "react-native-really-awesome-button";
import LinearGradient from "react-native-linear-gradient";

function Button() {
return (
<AwesomeButton
ExtraContent={
<LinearGradient
colors={["#4C63D2", "#BC3081", "#F47133", "#FED576"]}
/>
}
>
<Text>Instagram</Text>
</AwesomeButton>
);
}
```

## Props

| Attributes | Type | Default | Description |
| :-------------------- | :-----------: | :-------: | :-------------------------------------------------------- |
| activityColor | `String` | `#FFFFFF` | Progress button error label text |
| backgroundActive | `String` | `#C0C0C0` | Button active background-color |
| backgroundColor | `String` | `#C0C0C0` | Button main background-color |
| activityColor | `String` | `#FFFFFF` | Button activity indicator color |
| activeOpacity | `Number` | `1` | Button active state opacity |
| backgroundActive | `String` | `#C0C0C0` | Button active state background-color |
| backgroundColor | `String` | `#C0C0C0` | Button content background-color |
| backgroundDarker | `String` | `#9F9F9F` | Button bottom-front-face background-color |
| backgroundShadow | `String` | `#C0C0C0` | Button bottom shaddow background-color |
| backgroundPlaceholder | `String` | `#C0C0C0` | Button placeholder background-color |
| backgroundProgress | `String` | `#C0C0C0` | Button progress bar background-color |
| backgroundShadow | `String` | `#C0C0C0` | Button progress bar background-color |
| backgroundDarker | `String` | `#9F9F9F` | Button front face background-color |
| borderColor | `String` | `null ` | Button border-color |
| borderColor | `String` | `null` | Button border-color |
| borderRadius | `Number` | `4` | Button border-radius |
| borderWidth | `Number` | `0` | Button border-width |
| disabled | `Boolean` | `true` | Button disabled state: cancels animation and onPress func |
| height | `Number` | `50` | Button height |
| onPress               | `Func`     | `null` | Button onPress function |
| progress             | `Boolean`    | `false` | Enable progress animation |
| width | `Number` | `null` | Setting width to `null` mirrors an `auto` behaviour |
| paddingHorizontal | `Number` | `12` | Sets the button horizontal padding |
| paddingTop | `Number` | `0` | Sets the button padding top |
| paddingBottom | `Number` | `0` | Sets the button padding bottom |
| stretch | `Boolean` | `false` | When set to `true` together with width set to `null` the button fills it's parent component width |
| disabled | `Boolean` | `true` | Button disabled state: cancels animation and onPress func |
| raiseLevel | `Number` | `4` | Button 3D raise level |
| ExtraContent | `Node` | `null` | Renders a custom component inside the button content body |
| springRelease | `Boolean` | `true` | Button uses spring on the release animation |
| style                 | `Style`     | `null`   | Button container custom styles |
| onPress               | `Function`   | `null` | Button onPress function. It receives a `next` argument when the `progress` prop is set to `true` |
| progress             | `Boolean`    | `false` | When set to `true` enables progress animation |
| progressLoadingTime   | `Number`    | `3000` | Number in `ms` for the maximum progress bar animation time |
| textColor | `String` | `#FFFFFF` | Button default label text color |
| textLineHeight | `Number` | `20` | Button default label text line-height |
| textSize | `Number` | `16` | Button default label text font-size |
| width | `Number` | `null` | Setting width to `null` mirrors an `auto` behaviour |
| textLineHeight | `Number` | `20` | Button default label text line height |
| textSize | `Number` | `16` | Button default label text font size |
| textFamily | `Number` | `null` | Button default label text font family |
| style                 | `Style`     | `null`   | Button container custom styles |

## Author
## About the Author

#### Rafael Caferati

Expand Down
12 changes: 6 additions & 6 deletions demo/.expo/packager-info.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 5005,
"expoServerNgrokUrl": "https://in-qqr.rcaferati.demo.exp.direct",
"packagerNgrokUrl": "https://packager.in-qqr.rcaferati.demo.exp.direct",
"ngrokPid": 5019
"expoServerPort": null,
"packagerPort": null,
"packagerPid": null,
"expoServerNgrokUrl": null,
"packagerNgrokUrl": null,
"ngrokPid": null
}
3 changes: 2 additions & 1 deletion demo/components/container.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export default function container({ children }) {

const style = StyleSheet.create({
container: {
flex: 1
flex: 1,
backgroundColor: "#FFF"
},
scrollView: {
paddingTop: 30,
Expand Down
6 changes: 1 addition & 5 deletions demo/components/example.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,10 +160,6 @@ const styles = StyleSheet.create({
},
iconLeft: { marginRight: 5 },
gradient: {
position: "absolute",
top: 0,
left: 0,
height: "100%",
width: "100%"
...StyleSheet.absoluteFillObject
}
});
12 changes: 6 additions & 6 deletions demo/components/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export { default as Example1 } from "./examples/example-1";
export { default as Example2 } from "./examples/example-2";
export { default as Example3 } from "./examples/example-3";
export { default as Example4 } from "./examples/example-4";
export { default as Example5 } from "./examples/example-5";
export { default as Example6 } from "./examples/example-6";
export { default as Theme1 } from "./scenes/theme-1";
export { default as Theme2 } from "./scenes/theme-2";
export { default as Theme3 } from "./scenes/theme-3";
export { default as Theme4 } from "./scenes/theme-4";
export { default as Theme5 } from "./scenes/theme-5";
export { default as Theme6 } from "./scenes/theme-6";
export { default as Example } from "./example";
export { default as RootStack } from "./rootStack";
103 changes: 82 additions & 21 deletions demo/components/rootStack.js
Original file line number Diff line number Diff line change
@@ -1,35 +1,96 @@
import React from "react";
import { createStackNavigator } from "react-navigation";
import Example1 from "./examples/example-1";
import Example2 from "./examples/example-2";
import Example3 from "./examples/example-3";
import Example4 from "./examples/example-4";
import Example5 from "./examples/example-5";
import Example6 from "./examples/example-6";
import {
createStackNavigator,
createBottomTabNavigator
} from "react-navigation";
import Theme1 from "./scenes/theme-1";
import Theme2 from "./scenes/theme-2";
import Theme3 from "./scenes/theme-3";
import Theme4 from "./scenes/theme-4";
import Theme5 from "./scenes/theme-5";
import Theme6 from "./scenes/theme-6";
import Social from "./scenes/social";
import Progress from "./scenes/progress";
import {
AntDesign,
FontAwesome,
MaterialCommunityIcons
} from "@expo/vector-icons";

const RootStack = createStackNavigator(
const ThemeStack = createStackNavigator(
{
Example1: {
screen: Example1
Theme1: {
screen: Theme1
},
Example2: {
screen: Example2
Theme2: {
screen: Theme2
},
Example3: {
screen: Example3
Theme3: {
screen: Theme3
},
Example4: {
screen: Example4
Theme4: {
screen: Theme4
},
Example5: {
screen: Example5
Theme5: {
screen: Theme5
},
Example6: {
screen: Example6
Theme6: {
screen: Theme6
}
},
{
initialRouteName: "Example1"
initialRouteName: "Theme1"
}
);

const SocialStack = createStackNavigator(
{
SocialHome: {
screen: Social
}
},
{
initialRouteName: "SocialHome"
}
);

const ProgressStack = createStackNavigator(
{
ProgressHome: {
screen: Progress
}
},
{
initialRouteName: "ProgressHome"
}
);

const RootStack = createBottomTabNavigator(
{
Themes: ThemeStack,
Social: SocialStack,
Progress: ProgressStack
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = FontAwesome;
let iconName = "paint-brush";
if (routeName === "Social") {
iconName = `sharealt`;
IconComponent = AntDesign;
} else if (routeName === "Progress") {
iconName = "progress-check";
IconComponent = MaterialCommunityIcons;
}
return <IconComponent name={iconName} size={20} color={tintColor} />;
}
}),
tabBarOptions: {
activeTintColor: "tomato",
inactiveTintColor: "gray"
}
}
);

Expand Down
73 changes: 73 additions & 0 deletions demo/components/scenes/progress.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from "react";
import { StyleSheet, View, Text } from "react-native";
import AwesomeButton from "react-native-really-awesome-button/src/themes/blue";
// import AwesomeButton from "../../src/themes/blue";
import Container from "../container";
import Section from "../section";
import {
AntDesign,
FontAwesome,
MaterialCommunityIcons
} from "@expo/vector-icons";
import { LinearGradient } from "expo";

export default function progress({ ButtonComponent }) {
return (
<Container>
<Section title="Labeled Buttons">
<AwesomeButton
style={styles.button}
progress
onPress={next => {
setTimeout(() => {
next();
}, 1000);
}}
type="primary"
width={200}
>
Progress
</AwesomeButton>
<AwesomeButton
style={styles.button}
progress
onPress={next => {
setTimeout(() => {
next();
}, 2000);
}}
type="primary"
width={200}
progressLoadingTime={6000}
>
Slower Progress
</AwesomeButton>
</Section>
</Container>
);
}

progress.navigationOptions = ({ navigation }) => {
return {
title: "Progress Examples",
headerStyle: {
backgroundColor: "#1390da"
},
headerTintColor: "#FFF",
headerTitleStyle: {
fontWeight: "bold"
}
};
};

const styles = StyleSheet.create({
button: {
marginTop: 8,
marginBottom: 8
},
text: {
fontWeight: "bold",
color: "white"
},
iconLeft: { marginRight: 8 }
});
Loading

0 comments on commit 27cb248

Please sign in to comment.