https://github.com/mariusmonkam/rn-reusable-components

Resusable components, Buttons, Cards, Images, List of objects,animation for react-native
https://github.com/mariusmonkam/rn-reusable-components

buttons cardscript image list react-native svg

Last synced: 1 day ago
JSON representation

Resusable components, Buttons, Cards, Images, List of objects,animation for react-native

• Host: GitHub
• URL: https://github.com/mariusmonkam/rn-reusable-components
• Owner: MariusMonkam
• Created: 2020-06-17T21:25:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T22:40:40.000Z (almost 2 years ago)
• Last Synced: 2023-03-07T17:00:41.448Z (over 1 year ago)
• Topics: buttons, cardscript, image, list, react-native, svg
• Language: JavaScript
• Size: 1.81 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# rn-reusable-components

Resusable components, Buttons, Cards, Images, List of objects,animation for react-native

# Installation

first install install react-native via expo by run the following code

`Assuming that you have Node 12 LTS or greater installed, you can use npm 

to install the Expo CLI command line utility:`

```javascript

npm install -g expo-cli

```

Then run the following commands to create a new React Native project called "YourProjectName":

```javascript

expo init YourProjectName

cd YourprojectName

npm start # you can also use: expo start

```

[Read more about Installing React-native with expo here](https://reactnative.dev/docs/environment-setup)

When your project is ready , create a directory that you can call ##components and a subdirectory

that you can call ##buttons inside ##buttons 

*create a file and name it #Button.js

*copy and paste the following code inside the file is your main button component 

```javascript

import React from "react";

import { TouchableOpacity, StyleSheet, Text } from "react-native";

export function Button(props) {

  //Let's define our props

  const { title, color, ...otherProps } = props;

  return (

    

      {title}

    

  );

}

Button.defaultProps = {

  color: "blue",

};

const styles = StyleSheet.create({

  button: {

    borderRadius: 10,

    justifyContent: "center",

    alignItems: "center",

    padding: 15,

    margin: 5,

  },

  boxWithShadow: {

    shadowColor: "#000",

    shadowOffset: { width: 0, height: 1 },

    shadowOpacity: 0.8,

    shadowRadius: 2,

    elevation: 2,

  },

  text: {

    fontSize: 20,

    fontWeight: "bold",

    color: "white",

    elevation: 4,

  },

});

```

Now you can use your button any where in your app by importing it like this,

```javascript

import React from "react";

import { StyleSheet, Alert, View } from "react-native";

import { Button } from "./Button";

export default function HomeButton() {

  return (

    

      

         Alert.alert("Press me")}

          title="Press me"

          color="skyblue"

        />

         Alert.alert("Click  me")}

          title="Click me"

          color="red"

        />

         Alert.alert("Smile to  me")}

          title="Smile to me"

          color="indigo"

        />

         Alert.alert("Read  me")}

          title="Read me"

          color="seagreen"

        />

         Alert.alert("Follow  me")}

          title="Follow me"

          color="yellowgreen"

        />

         Alert.alert("Share  me")}

          title="Share me"

          color="mediumorchid"

        />

         Alert.alert("Guide  me")}

          title="Guide me"

          color="navy"

        />

      

    

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: "#fff",

    alignItems: "center",

    justifyContent: "center",

  },

});

```

Pay attention on where is located your ##Button.js when importing

Happy Hacking!

More reusable components coming!

Stay tune!