Skip to content

Instantly share code, notes, and snippets.

View CharlesMangwa's full-sized avatar
🤔
Dabbling with Widgets...

Carlito CharlesMangwa

🤔
Dabbling with Widgets...
View GitHub Profile
@CharlesMangwa
CharlesMangwa / Chat.js
Last active March 15, 2018 19:41
React Data Fetching - `requestToApi` use case
import React, { Component } from 'react'
import { requestToApi } from 'react-data-fetching'
// Just here for better understanding
import { ChatFeed } from './components'
export default class Chat extends Component {
state = { messages: null }
async componentDidMount() {
@CharlesMangwa
CharlesMangwa / Profile.js
Last active March 15, 2018 19:41
React Data Fetching - Fetching data from Redux store
import React, { Component } from 'react'
import { Image, View, Text } from 'react-native'
import { Fetch } from 'react-data-fetching'
export default class Container extends Component {
render() {
return (
<Fetch path="store">
{({ data }) => (
<View>
@CharlesMangwa
CharlesMangwa / EnhancedContainer.js
Last active March 15, 2018 19:41
React Data Fetching - Use case with/without`<ConnectedFetch>`
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { Fetch } from 'react-data-fetching'
export default class Container extends Component {
render() {
return (
<>
// Without <ConnectedFetch>
<Fetch
@CharlesMangwa
CharlesMangwa / Root.js
Last active March 15, 2018 19:41
React Data Fetching - `<ConnectedFetch>` use case
import React from 'react'
import { Provider } from 'react-redux'
import { ConnectedFetch } from 'react-data-fetching'
import App from './app'
const Root = () => (
<Provider store={store}>
<ConnectedFetch
api="htpps://api.nyan.com"
@CharlesMangwa
CharlesMangwa / Timeline.js
Last active March 16, 2018 21:02
React Data Fetching - `refetch` prop use case
import React, { Component, Fragment } from 'react'
import { Fetch } from 'react-data-fetching'
// Just here for better understanding
import { PostsList } from './components'
export default class Timeline extends Component {
state = {
isLoadingMore: false,
posts: undefined,
@CharlesMangwa
CharlesMangwa / News.js
Last active March 15, 2018 19:41
React Data Fetching - Fetchcycle hooks
import React, { Component } from 'react'
import { Fetch } from 'react-data-fetching'
// Just here for better understanding
import { Articles, ErrorModal, Loader } from './components'
export default class News extends Component {
state = { title: 'News' }
renderContent = ({ error, data }) => {
@CharlesMangwa
CharlesMangwa / Container.js
Last active March 15, 2018 19:41
React Data Fetching - A bit more complex use case
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { Fetch } from 'react-data-fetching'
export default class Container extends Component {
render() {
return (
<Fetch
url="https://api.nyan.com/cats/squad"
method="POST"
@CharlesMangwa
CharlesMangwa / App.js
Last active March 15, 2018 19:41
React Data Fetching - Basic use case
import React, { Component } from 'react'
import { Fetch } from 'react-data-fetching'
export default class App extends Component {
render() {
return (
<Fetch
url="https://api.github.com/users/octocat"
>
{({ data }) => (
@CharlesMangwa
CharlesMangwa / App.js
Last active August 7, 2017 10:03
App sample with React Router Navigation
import React from 'react'
import { View } from 'react-native'
import { Route, Redirect, Switch } from 'react-router'
import { BottomNavigation, Tab } from 'react-router-navigation'
import { Home, Search, Profile } from '@App/modules'
import getIcon from '@helpers/icon'
import { BRAND_COLORS } from '@theme/colors'
import styles from './styles'
@CharlesMangwa
CharlesMangwa / Auth.js
Last active May 9, 2017 16:11
Auth screen sample with React Router Navigation
import React from 'react'
import { Image, View } from 'react-native'
import { Card, Navigation } from 'react-router-navigation'
import { Connection, Inscription, Main } from '@Auth/modules'
import { BackButton } from '@components'
import logo from '@assets/images/logo.png'
import styles from './styles'