react-native-simple-twitter

If you have request, Please send a PR or issue.

• please see CHANGELOG.md
• TWLoginButton / twitter.get() / twitter.post() will be removed on next version (v3.1.0).

React-Native-Simple-Twitter v3.0

Twitter API client for React Native without react-native link.
This package don't use NativeModule, only pure javascript.
So don't need to use react-native link and Expo can also easily use twitter API without auth0 and server.

You can use custom hooks from v3.0

課題

• importでTwitterAccountTypesを読み込めるように
• TWModalを開くときにクッキーの削除できるようにtwitter.switch()を用意
  • cookieの削除がwkwebviewだとできないバッグっぽい
  • ingonitoとかがあるけどそれはプライベートブラウジングみたいなもの

• onSuccessとonErrorを切り分けるべき？
  • 切り分けないとAPIのonErrorが取りづらいと思ったけど、ログインのエラー云々にしか使ってないからぶっちゃけどうでもいいや

• const {twitter,TWModal,loggedInUser,accessToken} = useTwitter()とした方が使いやすい気がする(useEffectで監視できる)
• twitter.setAccessToken()をしたらloggedInUserをアップデートするために自動でaccountを持ってくる
• useTwitter({consumerKey,consumerSecret})で初期化できるようにする

• loggedInUserが同じ値だとEffectしないのをどうするか？

• did not receive response to shouldstartload in time defaulting to yes

  • https://github.com/react-native-community/react-native-webview/issues/124

...
import { useTwitter } from "react-native-simple-twitter";

function Login() {
  // if login, please set onSuccess
  const { twitter, TWModal, loggedInUser, accessToken } = useTwitter({
    consumerKey:"key",
    consumerSecret:"secret",
  });

  const onLoginPress = async () => {
    try {
      await twitter.login();
    } catch(e) {
      console.log(e.errors);
    }
  }

  useEffect(() => {
    
  },[loggedInUser, accessToken]);

  ...

  return (
    <View>
      <Text onPress={onLoginPress}>login</Text>
      <TWModal />
    </View>
  )
}

Checkout v3.x example.

Previous version -> v2.4.1

Installation

This package use WebView, but WebView from react-native is deprecated, so you download with react-native-webview.

$ npm install react-native-simple-twitter react-native-webview --save

if you want to use more twitter types, use abraham/twitter-d

$ npm install --save-dev twitter-d

Demo

useTwitter API

import { useTwitter, SimpleTwitterTypes } from 'react-native-simple-twitter';

// init with twitter application key and secret
const { twitter, TWModal, loggedInUser, accessToken } = useTwitter({
  // onSuccess:(user,accessToken) => void,
  // onError?:(err) => void,
  consumerKey?:string,
  consumerSecret?:string,
})

useEffect(() => {
  console.log(loggedInUser);
  console.log(accessToken);
},[loggedInUser,accessToken]);

useTwitter()

Name	Description
onSuccess:(user,accessToken) => void	return loggedin user object and access token
onError?:(err) => void	if login failed, call this method
consumerKey?:string	application key
consumerSecret?:string	application secret key

twitter

Name	Description
twitter.login()	Get login url and open TWModal
twitter.switch()	Get new login url with reset cookie and open TWModal
twitter.setConsumerKey(consumer_key,consumer_key_secret)	set application key and secret
twitter.getAccessToken()	get access_token and access_token_secret, when user logged in app
twitter.setAccessToken(access_token,access_token_secret)	set user access_token and access_token_secret, when you already have access_token and access_token_secret
twitter.api("GET" | "POST" | "PUT" | "DELETE" | "PATCH",endpoint,parameters?)	call twitter api
twitter.get(endpoint,parameters)	alias of twitter.api. this method will be deprecated
twitter.post(endpoint,parameters)	alias of twitter.api. this method will be deprecated

TWModal props

Name	Default	Description

loggedInUser

• return logged in user.
• if you success login or use twitter.setAccessToken(access_token,access_token_secret), loggedInUser will change.
• loggedInUser don't have parameter status.

accessToken

• return logged in user's accessToken.
• if you success login or use twitter.setAccessToken(access_token,access_token_secret), accessToken will change.

SimpleTwitterTypes

• types for this packages.

Other API

• decodeHTMLEntities

import { decodeHTMLEntities } from 'react-native-simple-twitter'
 
console.log(decodeHTMLEntities("& ' ' / ' / < >   ""))

Tweet is include htmlencoded characters.
So this function decode special characters.

• getRelativeTime

import { getRelativeTime } from 'react-native-simple-twitter'
 
console.log(getRelativeTime(new Date(new Date().getTime() - 32390)))
console.log(getRelativeTime("Thu Apr 06 15:28:43 +0000 2017"))

Tweet created_at convert to relative time. ex) 1s 15m 23h