watanabeyu / react-native-simple-twitter

Twitter API client for react native without react-native link and react custom hook

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 { useTwitter } from "react-native-simple-twitter";

function Login() {
  // if login, please set onSuccess
  const { twitter,TWModal } = useTwitter({
    onSuccess:(user,accessToken) => {
      console.log(user);
      console.log(accessToken);
    }
  });

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

  useEffect(() => {
    twitter.setConsumerKey("key","secret");
  },[]);

  ...

  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 } from 'react-native-simple-twitter';

const { twitter, TWModal } = useTwitter({
  onSuccess:(user,accessToken) => void,
  onError?:(err) => void,
})

useTwitter()

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

twitter

Name	Description
twitter.login()	Get login url 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"
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

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

react-native-simple-twitter's Issues

android token issue

hi, i am using your package . if i am using in the ios this is working fine further more when i use android it is not giving any token and redirect

"Invalid hook call" error

When i try to run very basic example given in the readme doc, i am facing invalid hook call error.

My code is:

import { useEffect } from "react";
import { Text, View } from "react-native";
import { useTwitter } from "react-native-simple-twitter";

const TwitterSignin = () => {
    
    const { twitter, TWModal, loggedInUser, accessToken } = useTwitter({
        consumerKey: "my key",
        consumerSecret: "my secret",
    });

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

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

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

export default TwitterSignin

react native version: 0.71.6

An example of logging user in

can you provide an example of how to log the user in? In particular how to get a user's consumer key and consumer secret from the client side as seen here: https://github.com/watanabeyu/react-native-simple-twitter/blob/master/src/client.js#L22. Your example seems to assume the user is already logged in.

URL callback

After login the app only shows pin and not redirect back to my app. How to setup the apps.twitter.com?

Make this generic?

Hey there @watanabeyu!

first, I want to thank you for making this amazing tool!
Such a breeze to use when you just want simple oauth.

We need to integrate with instagram as well and as I though this was a good starting point, I forked it and started making a instagram version of the package but then realized that maybe you already done it.

And behold, you did!

I see though that rn-simple-instagram is a tad dated and not up to date with this package. So I wonder if we should join forces and figure out how to make this package generic. Think about it as react-native-simple-oauth that works with multiple oauth provider.

What do you think?

consumer secret

is there a way to use this package without exposing the consumer secret , maybe with a server side validation?

Expo のバージョン 45 で TextInput に入力できない問題

個人開発で使わせてもらっています。
Expo でサーバーを用意せずに Twitter ログインができるのでとても良いライブラリだと思っています。

issue については、タイトルの通りなのですが、Expo のバージョン 45 で TextInput に入力できない問題が発生しましたので、修正していただきたいです。

よろしくお願いします。

---

I use it for personal development.
I think it is a very good library because it allows me to log in to Twitter without having to prepare a server for Expo.

As for the issue, the title is correct, but there is a problem in Expo version 45 that prevents me from inputting text into TextInput.

Thank you very much.

Tried to register two views with the same name RNCWebView

Hello,

I'm trying to implement twitter login with expo (SDK 41). I'm running into an error as soon as i call the useTwitter hook:
"Tried to register two views with the same name RNCWebView".

I understand this might be a version conflict between the webview used by the library (v8.2.1), and another webview used in my app (11.2.3).

Normally if react-native-webview is declared as a peerDepency in package.json of your lib, it should take my version of rn-webview, or am i mystaken ?

Thanks you in advance for any help you could give

Specify which twitter callback url

i can't find a module to specify which twitter callback url to use.
as of my case i have another callback url in my twitter app dashboard to handle login in the browser.

Error while /oauth/request_token

Hi,

I'm getting the error while calling /oauth/request_token api. I've done some console.log in the code.

uri: https://api.twitter.com/oauth/request_token

headers: {"headers": {"Authorization": "OAuth oauth_callback=https%3A%2F%appName.app, oauth_consumer_key=your_consumer/-key, oauth_nonce=qubNcG7rUP3MjQwxwxOmCtCiocLlkpkz, oauth_signature=uEaaVFVjbAITfZua91l%2FIsHOYtE%3D, oauth_signature_method=HMAC-SHA1, oauth_timestamp=1652179191.233, oauth_version=1.0"}, "method": "POST"}

response:
{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "E10BAB59-68BC-44D8-9F60-4080584B7AA3", "name": "request_token.html", "offset": 0, "size": 4078, "type": "text/html"}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "E10BAB59-68BC-44D8-9F60-4080584B7AA3", "name": "request_token.html", "offset": 0, "size": 4078, "type": "text/html"}}, "bodyUsed": false, "headers": {"map": {"alt-svc": "h3=":443"; ma=2592000,h3-29=":443"; ma=2592000", "cache-control": "no-cache, no-store, max-age=0", "content-encoding": "gzip", "content-length": "1723", "content-security-policy": "default-src 'none'; img-src https://abs.twimg.com; script-src https://abs.twimg.com about:; style-src https://abs.twimg.com 'unsafe-inline'; font-src https://abs.twimg.com https://twitter.com; connect-src 'none'; object-src 'none'; media-src 'none'; frame-src 'none'; report-uri https://twitter.com/i/csp_report?a=ORTGK%3D%3D%3D&ro=false", "content-type": "text/html;charset=utf-8", "date": "Tue, 10 May 2022 10:39:51 UTC", "server": "tsa_k", "strict-transport-security": "max-age=631138519", "via": "1.1 google", "x-connection-hash": "72a9703d94498b092114f5d90dd45127ba542bf54d6d1784a6ae360b748ea308", "x-response-time": "178", "x-xss-protection": "0"}}, "ok": false, "status": 404, "statusText": "", "type": "default", "url": "https://api.twitter.com/oauth/request_token"}

Can you plz help me?

Thanks

Error 32 Could not authenticate you on account/verify_credentials.json

When calling the account/verify_credentials.json endpoint, it returns an error 32 "could not authenticate you". In looking through the code, I believe it is due to the generated signature. When I use postman to make the request using OAuth 1.0 and fill in the required parameters, it generates a different signature in the OAuth authorization header and is successful. Any ideas? Could it be due to the way the crypto-js library is handling it?

Not Redirect back to app

After successfully login it doesn't back to app also onGetAccessToken functions is not called

react-navigation reset not working in onSuccess

I wanna go component2 when I login successed.
but this code not working in onSuccess.
but this work in onPress.

const resetAction = NavigationActions.reset({
      index: 0,
      key: null,
      actions: [NavigationActions.navigate({ routeName: 'TabNavRoot' })],
    });
    this.props.navigation.dispatch(resetAction);

please teach me.


my navigation

StackNavigation

• component1
• TabNavRoot(TabNavigation)
  - component2
  - component3
  - component4

callback url

When I enter my username and password, a pin code appears in the screen, and I'm told to copy it and return to the application to complete authorization process.
Iguess that it could be because of my callback url. It is empty in twitter application manager. I don't know what to do (((

onGetAccessToken never called

when I press login button webview appears, but there is a text which says that my accesstoken and secret kesys are invalid. And says to return from where I came.
Also, I can see that verify_credentials request int componentWillMount, responses error with code 32(could not authenticate). Idon't know what to do, please help.
I use Expo(create-react-native-app).