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
-
by Mohammed Salman 穆罕默德·萨尔曼(Mohammed Salman) 如何使用React Native构建新闻应用 (How to build a news app with React Native) For my first post on Medium, and I wanted to share with you how I made a news app with R
-
by Spencer Carli 斯宾塞·卡利(Spencer Carli) 如何开始使用React Native (How to Get Started with React Native) Before diving in I want to tell you a little story — I’ve been wanting to put together a simple website
-
A todo app touches on all the important parts of building any data-driven app, including the Create, Read, Update and Delete (CRUD) operations. In this story I’ll be building a todo app with one of th
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
百度移动统计SDK支持使用react native框架的H5页面统计，封装好的插件已经在github上开源，相关用法具体请参考：https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。
-
The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t
-
React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Ima
-
本文向大家介绍react-native setState，包括了react-native setState的使用技巧和注意事项，需要的朋友参考一下 示例 要在应用程序中更改视图，可以使用setState-这将重新渲染您的组件及其任何子组件。setState在新状态和先前状态之间执行浅表合并，并触发组件的重新呈现。 setState 接受键值对象或返回键值对象的函数 键值对象 功能 使用函数对于基于
-
诸葛io移动统计支持React Native插件，以下为集成方法。 1. 环境准备 1.1. iOS环境 iOS 8.0+ 代码支持iOS8.0的系统 pod 1.0+ iOS系统的集成依赖于cocoaPod工具 1.2. Android环境 Android SDK 16+ 代码支持Android 16+ 1.3. React Native环境 react-native 0.50+ react-n
-
ZhiHuDaily-React-Native 是使用 React Native for Android 实现的知乎日报客户端。 此项目使用 React Native 主要特性： Flex Style Direct Manipulation Native UI Components DrawerLayoutAndroid Image/Text/ListView TouchableHighlight
-
基于react-native实现的博客园移动客户端，兼容android和ios 功能列表： 用户登录 & 个人信息查看 博文列表 & 博文评论列表 & 博文评论添加 & 我的博文列表 & 博文离线 & 博文收藏 新闻列表 & 新闻评论列表 & 新闻评论添加 & 新闻离线 & 新闻收藏 闪存列表 & 闪存评论列表 & 闪存评论添加 & 新增闪存 & 我的闪存列表 博问列表 & 博问回答列表 & 博问