ue / React Native Story
Licence: mit
React native instagram story
Stars: ✭ 144
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Story
Photofilters
photofilters library for flutter
Stars: ✭ 229 (+59.03%)
Mutual labels: package, image, instagram
Network Avatar Picker
A npm module that returns user's social network avatar. Supported providers: facebook, instagram, twitter, tumblr, vimeo, github, youtube and gmail
Stars: ✭ 74 (-48.61%)
Mutual labels: image, instagram
Modern Wasm Starter
🛸 Run C++ code on web and create blazingly fast websites! A starter template to easily create WebAssembly packages using type-safe C++ bindings with automatic TypeScript declarations.
Stars: ✭ 140 (-2.78%)
Mutual labels: package, npm
Tosin
Initialize a npm package with everything included, from CI to documentation website
Stars: ✭ 142 (-1.39%)
Mutual labels: package, npm
Npm Api
Node.js library for getting info from NPM’s API
Stars: ✭ 67 (-53.47%)
Mutual labels: package, npm
Shellphish
Phishing Tool for 18 social media: Instagram, Facebook, Snapchat, Github, Twitter, Yahoo, Protonmail, Spotify, Netflix, Linkedin, Wordpress, Origin, Steam, Microsoft, InstaFollowers, Gitlab, Pinterest
Stars: ✭ 1,037 (+620.14%)
Mutual labels: snapchat, instagram
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-36.11%)
Mutual labels: image, npm
Npm Try
🚆 Quickly try npm packages without writing boilerplate code.
Stars: ✭ 103 (-28.47%)
Mutual labels: package, npm
Qr Code With Logo
带头像(logo)的二维码(qrcode)生成工具，无jQuery依赖，自由调整大小
Stars: ✭ 104 (-27.78%)
Mutual labels: image, npm
Npmf
Fetch quick info of a npm pacakge using terminal
Stars: ✭ 64 (-55.56%)
Mutual labels: package, npm
React Native Markdown Editor
A markdown editor like github comment editor (contains preview, helper buttons)
Stars: ✭ 59 (-59.03%)
Mutual labels: package, npm
Mockingcase
node package that converts a string to mOcKiNgCaSe
Stars: ✭ 74 (-48.61%)
Mutual labels: package, npm
Npm Git Install
Clones and (re)installs packages from remote git repos. See npm/npm#3055
Stars: ✭ 49 (-65.97%)
Mutual labels: package, npm
React Image Timeline
📆 An image-centric timeline component for React.js
Stars: ✭ 77 (-46.53%)
Mutual labels: image, npm
Docusign Node Client
The Official DocuSign Node.js Client Library used to interact with the eSign REST API. Send, sign, and approve documents using this client.
Stars: ✭ 108 (-25%)
Mutual labels: package, npm
Gub
CLI tool for create an npm package from any repos. 🐳
Stars: ✭ 31 (-78.47%)
Mutual labels: package, npm
Nasa Cli
🚀 Download NASA Picture of the Day from your terminal!
Stars: ✭ 45 (-68.75%)
Mutual labels: package, npm
react-native-story
A react native component instagram stories
Installation
- 1.Run
npm i react-native-story --saveoryarn add react-native-story - 2.
import Story from 'react-native-story'
Getting started
Add react-native-story to your js file.
import Story from 'react-native-story'
Inside your component's render method, use Story:
const stories = [
{
id: "4",
source: require("../../../assets/stories/4.jpg"),
user: "Ugur Erdal",
avatar: require("../../../assets/avatars/ugurerdal.png")
},
{
id: "2",
source: require("../../../assets/stories/2.jpg"),
user: "Mustafa",
avatar: require("../../../assets/avatars/mustafa.png")
},
{
id: "5",
source: require("../../../assets/stories/5.jpg"),
user: "Emre Yilmaz",
avatar: require("../../../assets/avatars/emre.png")
},
{
id: "3",
source: require("../../../assets/stories/3.jpg"),
user: "Cenk Gun",
avatar: require("../../../assets/avatars/cenk.png")
},
];
render() {
return (
<Story
unPressedBorderColor="#e95950"
pressedBorderColor="#ebebeb"
stories={stories}
footerComponent={
<TextInput
placeholder="Send message"
placeholderTextColor="white"
/>
}
/>
}
API
| Props | Type | Optional | Default | Description |
|---|---|---|---|---|
| id | string | required | - | Json story data must have this |
| stories | object | required | - | As above example |
| unPressedBorderColor | string | true | "#e95950" | Unpressed Border color |
| pressedBorderColor | string | true | "#ebebeb" | Pressed border color |
| footerComponent | jsx | true | - | Bottom of the stories footer component |
Thanx for the help
MIT Licensed UE
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].