Themes in React Native – Adam Bene – Medium

Themes in React Native  #reactnative #javascript #react #reactjs #reactjs

  • Themes in React Nativetheme provider and UI elementsWhen developing a large scale app it is a good idea to build our own UI components.
  • The styles should be factored out to be DRY.ContextReact context is a suitable tool for dependency injection.
  • Let’s inject our theme.ThemeProvider theme={lightTheme} ButtonTap param is props, 2nd is context.contextTypes has to be defined in order to receive properties in context.
  • Otherwise context will be empty.const Button = ({ text }, { theme }) = ( TouchableHighlight Text style={{ theme.color }}{text}/Text = { theme: PropTypes.shape({ color: PropTypes.string })}ThemeProviderThe return value of getChildContext() will be propagated to its children down the component tree as context.childContextTypes property is needed to defined.class ThemeProvider extends React.Component { getChildContext() { return { theme: this.props.theme } } render() { return this.props.children = { theme: PropTypes.shape({ color: PropTypes.string })}Change ThemesThemes can be changed through props.
  • The example below toggles two themes in the state.light theme by defaultdark theme with smaller border radius, paddings, margins and fontsWorking ExampleYou can try out a working example both on iOS and Android after setting up development environment.react-native run-iosreact-native run-androidSee Also

When developing a large scale app it is a good idea to build our own UI components. The styles should be factored out to be DRY. React context is a suitable tool for dependency injection. Similar to…
Continue reading “Themes in React Native – Adam Bene – Medium”

Introduction – Developing a native mobile app with React-Native and Typescript – Medium

Introduction  #typescript #javascript #react #reactnative

  • We decided on developing a mobile app with react-native just because the idea of developing a native mobile app with javascript felt very exciting.We also thought of using Typescript with React because we feel it not only just brings type-safety to the javascript code but in-fact brings all the advantages of object-oriented programming allowing us to think javascript code in terms of some well-established design patterns and standards that help us design highly scalable code.
  • The goodies it brings — abstract and concrete classes, types, interface, enums are hard to resist.As we started on the development of the app, I thought it would be a good idea to put our learnings here in a series as it not only will help us document our tasks but would also help other react-native learners and developers.In this series, we will document step-by-step each task that we work on during the development of this app, right from the initial project set-up to its final implementation and release to the app store.What app we are going to developThe app we would be developing would be a simple photo albums app, where user can create an album and add photos to its from his/her mobile.Tech-stack to be usedUI using react-native + TypescriptStorage — Azure DocumentDBREST API using node.js, Azure DocumentDB Node APIAuthentication — oAuth (Facebook and Google)Targeted platformsIn its first version, we are planning to target only Android platform simply because couple of us in the team don’t own a Mac Book and apple doesn’t allow to develop iOS apps from any other operating system.Github RepoOur LimitationsWe are all learners of react/react-native, also this being a side project that we all will work on in our spare time, we are anticipating the project to go on a bit slow pace.Functional Testing — we don’t have a QE Automation expert in our team yet, so for most of its part Functional testing would be manual3.
  • Environment — for the UI app, we will use emulators on our local system to test our code.
  • Being a mobile app, it would be released to Android Playstore and thus we don’t need to maintain any servers for the UI app4.
  • So stay tuned, more stories to come soonInterested in joining us in this wonderful journey?we’ll be glad to have you in our team, pls email to us at iw2dev@gmail.com with a little bit about yourself

Couple of weeks back, I and some of my friends, started on a side/hobby project to learn reactJS. We decided on developing a mobile app with react-native just because the idea of developing a native…
Continue reading “Introduction – Developing a native mobile app with React-Native and Typescript – Medium”

Organizing stores for apps with MobX – Huiseoul Engineering

Organizing stores for apps with MobX  #mobx #javascript #react #reactjs

  • Organizing stores for apps with MobXMobX is a simple and scalable state management system that goes well with React and ReactNative.
  • Let’s take a look at how we can go about it with MobX stores.Let’s build a ToDo app to demonstrate.What stores will have?Stores will store either states of each domain or app-wide states.
  • Also it makes sense to have getter methods using @computed of MobX:@computedpublic get sortedToDos() { return this.toDos.sort((a, b) = b.createdAt – a.createdAt);}@computedpublic get isNewToDoValid() { return this.newToDo.isValid;}And some @action methods for strict mode:@actionpublic pushNewToList = () = { this.list.push(this.new); this.resetNew();}Have one ui store and many domain storesYour application might have application-wide ui states indicating if a modal is shown, menu button is pressed, etc.
  • These states have to be stored in somewhere and having an AppStore or UIStore might be a good idea for them.class UIStore { @observable public isModalOn: boolean; …}Every other store should represent their own domain such as UserStore, ToDoStore, etc.
  • One way to achieve this is to export an already instantiated object from store class.class ToDoStore { …}export default new ToDoStore();The other way is to use provider components and inject in mobx-react library.

MobX is a simple and scalable state management system that goes well with React and ReactNative. Often time when an app scales it makes sense to give it a logical structure. Let’s take a look at how…
Continue reading “Organizing stores for apps with MobX – Huiseoul Engineering”

Improve Your UX by Dynamically Rendering Images via React

Improve Your UX by Dynamically Rendering Images via React @arwong09  #Reactjs #UX #Startups

  • It’s also how performant it is, how intuitive it is — how much it delights your user.We’ve all been there, discovering a new app or web page for the first time and seeing something like this:With high resolution photos and retina screens, it’s all too often we have to sit and watch images painstakingly render.
  • We accomplish this by using React’s onLoad event; we can make the request to the server for the image files, but not render the image in the DOM until the entire file has been downloaded.the end result: smooth as butterThe end result is an app that loads high resolution images and never keeps the user waiting.
  • The placeholder teases the user and lets them know images are being loaded.
  • Furthermore, we hold off on rendering the images until they have been fully downloaded from the server so our user never has to see images painting from top to bottom in the browser.view live demoShow Me the Code!Rendering the PlaceholderFor our placeholder component (LoadingItem in this example), we simply render the image and apply any animation effects we want:export default function () { return ( ReactCSSTransitionGroup transitionName=”loadingItem” transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300} img className=”feed__loading-item” src={img} / /ReactCSSTransitionGroup )}In the render of our Feed component, we simply render LoadingItem as long as we still have FeedItems being loaded:export default class Feed extends Component { … render() { return ( div className=”feed” … {this.props.items.length this.state.loadedItems.length LoadingItem / } … /div ) }}Dynamically Rendering Images via `onLoad`Our Feed component works as follows:export default class Feed extends Component { constructor(props) { super(props) this.state = { loadedItems: [] } } onLoad(feedItem) { let updatedItems = this.state.loadedItems updatedItems.push({ name: feedItem.name, imgPath: feedItem.imgPath }) this.setState({ loadedItems: updatedItems }) }render() { return ( div className=”feed” h1 i) = FeedItem imgPath={item.imgPath} name={item.name} key={i} / )} {this.props.items.length this.state.loadedItems.length LoadingItem / } div className=”hidden” {this.props.items.map((item, i) = img src={item.imgPath} onLoad={this.onLoad.bind(this, item)} key={i} / )} /div /div ) }}So what’s happening here?
  • When the state updates, the newly loaded item is rendered into the DOM with the image already fully downloaded.That’s it!View live demoView full source code (star the repo if you found this helpful!)

It’s a competitive world out there right now. As we all know, just having a good idea isn’t enough to make your company the next billion dollar IPO. Execution is just as important, and when it comes…
Continue reading “Improve Your UX by Dynamically Rendering Images via React”

Building User Interfaces with Pure Functions and Function Composition in React

Build user interfaces with pure functions and function composition in #ReactJS:  #JavaScript

  • This idea is so important in React that React 0.14 introduced Stateless Functional Components which allows the code above to be written as normal functions (and which we’ll cover more in depth later in the course).
  • Perhaps one of my favorite things about React is it’s given me a light introduction to functional programming (FP) and a fundamental piece of FP are pure functions.
  • splice is not a pure function since each time we invoke it passing in the same arguments, we get a different result.
  • Well the main reason is React’s render method needs to be a pure function and because it’s a pure function, all of the benefits of pure functions now apply to your UI as well.
  • Another reason is that it’s a good idea to get used to making your functions pure and pushing “side effects” to the boundaries of your program.

👋 I’m Tyler. I’m a Google Developer Expert and a partner at React Training where we teach React online, in person, and build OSS like React Router.
Continue reading “Building User Interfaces with Pure Functions and Function Composition in React”

Released my fourth React Native app

  • It took me three weeks from the idea to publishing it on the app store, mostly because I was already familiar with React Native, and my current way to structure the app state works well for me.
  • I created a react-native-app-launcher library using Android’s AlarmManager to schedule the alarms in a way that an alarm icon is shown in the Status Bar.
  • You can read more about the Motivational Alarm Clock app on the Google Play store – this post is about the development part.
  • The alarms still work when the device is idle or the application is closed.
  • Portrait/Landscape Mode: You can watch the video in either Portrait or Landscape mode, but all other scenes should be in Portrait mode.

After releasing my first three React Native fitness apps, I published my fourth one for Android today: Motivational Alarm Clock React Native PHUL Workout Log There are a lot of great motivational…
Continue reading “Released my fourth React Native app”