React Native Web Browser App

An open-source, extensible cross-platform (mobile and desktop) web browser made in React Native!

T Notes

Set up for use as base for TBA.

• Set up CI Linting & Test
• Fix TS index type issues
• Return to this when it is more meaningful to ONE1
• Publicise dev/project intent (USP, not a regular browser)
• Encourage Open Source Input

Notes

• Updated some versions and bits, still not enough
• Need to look at react-dom updates or changelog/commit history to update to the new ways of doing things.

💩

Installation etc (not working yet, need to update react bits)

Globally install react-native-cli, expo if not done already

npm install -g react-native-cli
npm install -g expo
npm install -g expo-cli
npm install -g jest-expo

Install le modules

yarn install

Run as web, android or ios

yarn web

yarn android

yarn ios

react-native start

yarn start

expo jest

yarn test

jetify

yarn original_postinstall

npm run build

yarn prepare

yarn build

tsc --project ./tsconfig.build.json

Run app

iOS

• Go to ios folder
• Run ​pod install
• Back to project directory
• Run ​react-native run-ios (yarn ios)

Android

• Run ​react-native run-android (yarn android)

---

Why?

Because ONE1.

Scope

The browser should:

• have a UI that is no less functional than that of Firefox's;
• support at least iOS, Android, macOS, and Windows from one codebase;
• allow consumers to swap out the WebView for another one (for now, I'm using my fork of react-native-webview);

To be clear: This project is purely focused on building a browser UI, and forwarding user actions to a WebView. We are not trying to rebuild a browser engine here – just the UI around it.

Roadmap

• Functional navigation buttons (back, forward, stop, refresh)
• Functional URL bar (can navigate to URL inputs and updates text upon page redirect)
• Rotation
• Bar retraction
• Intelligent URL vs. search query determination in search bar
• Search suggestions / autocomplete text field
• Bars snapping to fully retracted/revealed upon gesture release
• Tabs
• History
• Browsing-state persistence
• Bookmarks
• Reading list
• Page-specific actions
• Branded app-specific actions (e.g. JS injection, popup blocking, whatever)

Prior art

Cliqz give good reasons as to why they use Firefox as a basis rather than Chromium.

• cliqz-oss/browser-android: an Android web browser UI built in Java, based on Firefox for Android(?). Is the UI for the Cliqz Play Store Android app.
• cliqz/user-agent-ios: an iOS web browser UI built in Swift, based on Firefox for iOS. Is the UI for the Cliqz AppStore iOS app.
• cliqz-oss/cliqz-s: Cliqz's prototype Windows browser, written in React Native Windows (not meant for production).
• cliqz-oss/browser-f: Cliqz's production desktop browser (Windows & Mac), based on Firefox desktop. There are a mixture of languages in the source: C++ and JS, at least. I'm not really sure what the dominant UI language is.
• cliqz-oss/browser-core: Cliqz's set of cross-platform (desktop & mobile) core modules such as their search UI.
• Mozilla Application Services, recommended as a state storage solution by Krzysztof Modras of Cliqz – particularly Places DB (explained by Krzysztof here).