Bringing the blockchain to React Native

TLDR: Despite the fact of the non existence of an Ethereum Wallet or Browser for React Native to interact with cross platform decentralized mobile apps, it’s possible bring the blockchain to React Native. Bringing blockchain to cross platform apps by React Native. Credits to pixabay. According to the basically a has its backend code running on a decentralized peer-to-peer network. Contrast this with an app in which the backend code is running on centralized servers. dApp’s white paper dApp The transparent immutable and decentralized nature of the blockchain enables the development of many awesome use cases such as for autonomous organization, sales, social networks, insurance companies and gaming among hundreds of others. This is an example of a proof-of-existence application of blockchains In this blog post I will explain how I made a mobile cross platform dApp aimed at ranking your favorites using React Native. cryptopunks Me, being wrong with this twit wait… cryptopunks is an awesome project that works just like a metaphore, for more info look into the following . why cryptopunks? blog post in reddit Credits https://blockgeeks.com/ The Stack Before we get to code, it is important to understand how to break this down. is a framework developed by Facebook that allows you to build native cross platform mobile apps using JavaScript and React. React Native is a set of tools that makes it significantly easier to get started with projects, since it includes a set of native APIs to be used right out of the box, like camera, etc. Expo React Native is the Ethereum compatible which implements the spec built for node.js and the browser. Web3 JavaScript API Generic JSON RPC is a development environment for Ethereum, that provides a set of tools like that simulates an Ethereum network in the localhost which is great for getting started. Truffle ganache-core Among other cool libraries worth mentioning like react-navigation, victory-native and react-native-star-rating. The Ethereum blockchain on React Native There are many about getting the to work on a React Native app, and it looks like there is not a . open issues web3.js JavaScript API real solution as of now This is because React Native uses execution environment, and depending on how the like buffer, or stream are mocked or implemented for the React Native app, it might need to ; therefore, you may need to as it is detailed in sample projects like that brings the Node API to the React Native environment. JavaScriptCore Node standard library APIs crypto link some native dependencies eject the expo app react-nativify Thus, while I was looking into alternatives, and after finding , I build a that behind scenes uses and a tiny pure javascript implementation of .But notice that JavaScript’s function might be considered as a cryptographically predictable random number generator, but I don’t worry about it right now, since doesn’t need it to sign transactions. the feature request on expo as a workaround babel preset for react native crypto-browserify randombytes Math.random() ethereumjs-tx So, aren’t voting transactions free? The short answer is no.In ( main Ethereum network ) all transactions are valued in real ethers or gas, but my experimental app is deployed on Testnet , a real blockchain for developments purposes that allows only 5 votes / transactions per second, thanks goes to for the free ethers to test it :) mainnet Ropsten staging faucet In this simple implementation each Vote/Star is around . That is not cheap at all, but that fee might be improved if the gas consumed for each vote is decreased.In that case the risk is that miners might take hours or days to process such low fee transactions. ( as of today) 0 . 0012 Ethers USD 1.31 There are ongoing discussions about how to improve this issue in the blockchain by using soft forks, LN, side chains or micro transactions. Web3 Provider dilemma A transaction is a set of instructions for modifying the state of the blockchain In order to sign Ethereum transactions and consume gas, real ethers, a public address and a private key are needed, or an HD wallet configured with at least one unlocked coinbase account to pay for the . voting transaction There are different ways of configuring the web3 provider to access dApps on the web either injected by an ethereum special browser like , through or by creating a local instance and configure an account with money right there on the code. Mist MetaMask Chrome Extension The thing is that there is no such browser for React Native and web3 cannot injected in the App, so in this experiment I ended up configuring the coinbase with . truffle-hdwallet-provider Another valid choice is the use of from , that allows you to sign transactions via a subprovider using , but there the situation is actually the same, since truffle-hdwallet-provider uses a similar mechanism behind scenes. web3-provider-engine MetaMask pure javascript as I am detailing in this gist In both options mentioned, the account one way or another is coded in the mobile app, and that might be insecure in a real production environment and that lacks of flexibility. Instead, a simple approach might be to ask the user the public and private key in order to sign the transaction and pay the vote, but that discarded since it is super insecure. Or use to register the identity of the voter, but I am still . uport not sure about React Native support I had seen the following project that looks promising as a key dependency for a possible React Native HD wallet to inject web3 to any given App, since it implements a light client Ethereum node. Definitely ambitious. react-native-geth Smart Contracts I created a simple Voting contract in language, and used as an abstraction to consume it from the mobile dApp. Solidity truffle-contract Contracts are also immutable. Once the contract is created and deployed on the blockchain, it cannot change, be undone or modified. Voting has a constructor which initializes with an array of cryptopunks, and they are assigned with an identifier name based upon their primary accessories. If you are curious about the contract, it is deployed on network.For more information about how I deployed it, see the following . Ropsten Testnet gist Possible improvements There are elections in which the more shares or token you own, the more votes you get. That can be reachable by providing a certain amount of ERC20 token to the voter.That might not apply to cryptopunks, but is worth considering. Demo _A mobile dApp to star your favorite cryptopunks_expo.io react-native-blockchain-poll on Expo _Contribute to react-native-blockchain-poll development by creating an account on GitHub._github.com agrcrobles/react-native-blockchain-poll Thoughts Despite the amount of use-cases the blockchain brings, as of today, it is not being adopted by big companies on mobile apps that often; since all ICOs, instead, are web-based. People from and are making an awesome job creating mobile dApp browsers, I think that step have just been done. cipherbrowser status.im I am supportive of the idea of decentralized cross platform mobile apps, React Native is getting mature and more stable as time passes by, and it’s been adopted by big companies to develop really great mobile apps ( in fact status.im mobile app is built on React Native ), and I am pretty sure that the use of the blockchain in React Native to build real mobile dApps is just around the corner. Opinions are my own, and I might be wrong. Thanks for reading. Credits Credits to the awesome by Mahesh Murthy that walked me through the creation a Voting simple smart contract. Medium article Credits to open source projects like , or , that aims at a similar goal with a different approach. react-native-ios-concensus react-native-web3-example react-native-box Thanks to my sister and who helped me with the write up, and as usual to encourage me to write the article. @pittorrr @gisela.d.muro References https://ethereum.stackexchange.com/questions/383/what-is-a-dapp https://medium.com/@preethikasireddy/how-does-ethereum-work-anyway-22d1df506369 https://medium.com/@jgm.orinoco/understanding-erc-20-token-contracts-a809a7310aa5