DEV Community: sayCheese

Apple will only accept apps built with Xcode 13 starting next month

sayCheese — Thu, 17 Mar 2022 11:06:45 +0000

Starting next month, Apple will begin mandating apps submitted to the App Store to be built with Xcode 13.

In an announcement on Tuesday, Apple revealed that come April, it will only accept apps that are built using Xcode 13, the latest version of Apple’s app development kit. The move will go into effect from April 25. By mandating Xcode 13, Apple will ensure that all new apps submitted to App Store are compatible with the latest versions of iOS, iPad OS, watchOS, tvOS, and macOS.

Starting April 25, 2022, iOS, iPadOS, and watchOS apps submitted to the App Store must be built with Xcode 13, which includes the SDKs for iOS 15, iPadOS 15, and watchOS 8.

Apple notes that developers can take advantage of all the new features and APIs introduced with iOS 15, watchOS 8, and macOS Monterey, including ARkit 5, SwiftUI, SharePlay, and Safari Extensions. Apps built with Xcode 13 will continue to support older versions of Apple software, such as iOS 14 and macOS Big Sur.

“Make the most of the exciting features in iOS 15, iPadOS 15, and watchOS 8 to offer even more intuitive and valuable user experiences. Improve your app’s performance by refactoring your code to take advantage of asynchronous functions in Swift. And with the latest updates to SwiftUI, you can enhance your apps with new features, such as improved list views, better search experiences, and support for control focus areas,” wrote Apple in its blog post.

The move comes after Apple released iOS 15.4 and iPadOS 15.5 to the public last week. The latest iOS version introduces several new features, including 112 new Unicode 14.0 emoji, Health and Wallet support for EU COVID-19 vaccination certificates, the ability to use Face ID when masked, Apple Card widget, support for setting up custom email domains, and other smaller, quality-of-life improvements.

Redux in React

sayCheese — Fri, 04 Mar 2022 09:51:20 +0000

Redux is a predictable state container for JavaScript apps.

Redux is for JavaScript applications.

Redux is not tied to React.
It can be used with Vanilla JavaScript or any JS framework like Angular, React, Vue, etc.
Redux is a library for JS applications.

Redux is a state container

Redux stores the state of your application.

For Example:- consider a react app - state of component
LoginFormComponent
state = { username:'', password:'', submitting: false }

State of an app is the state represented by all the individual component of that app.
UserListComponent
state = { users : [] }
Redux will store and manage this application state.
Application
state= { isUserLoggedIn = true, username: 'John', profileUrl: '', onlineUsers: [], isModalOpened: false }

Redux is predictable - In what way?

In redux, all state transitions are explicit and it is possible to keep track of them. (i.e) The changes to your application's state becomes predictable.

Redux can help you manage the state of your JavaScript application in a predictable way.

React + Redux
In React applications where you have considerable no. of components, which share some common state, State management could become troublesome. That's where Redux comes in.

With Redux, your state will come from outside your components.

Actually this solution can be doable in React itself with below ways.

React context - which prevents prop drilling.
useContext + useReducer - with these combining hooks.

React-Redux

React-Redux is the official Redux UI binding library for React.

Three core concepts in Redux

A store that holds the state of your application.
An action that describes the changes in the state of your application.
A Reducer which actually carries out the state transition depending on the action.

Summary

React is a library used to build user interfaces.
Redux is a library for managing state in a predictable way in JavaScript applications.
React-Redux is a library that provides bindings to use React and Redux in an application.

Reference Video.

Thanks for Reading.

React Native important concepts

sayCheese — Mon, 21 Feb 2022 12:53:12 +0000

Welcome Everyone!

Some of React Native's important concepts as follows.

Props and State

props : are immutable and are set by the parent and they are fixed throughout the lifetime of a component.

Components receive props from their parent. These props should not be modified inside the component. In React and React Native the data flows in one direction -> From the parent to the child.

The idea behind props is that you can make a single component that is used in many different places in your app. The parent that is calling the component can set the properties, which could be different in each place.

Props essentially help you write reusable code.

state : State can Change — Mutable. The variable data can be stored in the state. It is mutable means a state can change the value at any time. It is used to control the components.

State works differently when compared to props. State is internal to a component, while props are passed to a component.

Anytime there is data that is going to change within a component, state can be used.

Components

React is built around components. React code is essentially a bunch of nested components.

A component is essentially the same thing as a command in another programming language. It's just bundled with the visual output and handles the opening and closing on its own. You won't have to worry about incomplete syntax when using React native.

Component APIs: React native interacts with its APIs in a unique way. Its got some of its own commands, like render and setState, which are particular to the language's unique configuration. There's also the constructor command which lets you define the state and bind methods.

Functional components Increasing numbers of programmers are using React native using functional components. A functional component accepts a props object as an argument and outputs a bunch of HTML. It functions almost like a template, but one where you can use whatever JavaScript code you want.

Hooks

A Hook is a special function that lets you “hook into” React features. For example, _useState _is a Hook that lets you add React state to function components.

If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. Commonly following hooks are mostly used:

Layout with Flexbox

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, alignContent defaulting to flex-start instead of stretch, flexShrink defaulting to 0 instead of 1, the flex parameter only supporting a single number.

As a newbie in React Native I found myself time after time going back to React Native layout docs, struggling to understand and master the difference between all the different props. justify vs align, relative vs absolute, items vs content, It was all very confusing. Use this cheat sheet for styling.

FlatList and ScrollView

ScrollView: The ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it.

Flatlist: The FlatList Component is an inbuilt react-native component that displays similarly structured data in a scrollable list. It shows only those elements that are currently being displayed on the screen.

As opposed to the ScrollView, the FlatList renders only those elements that are currently being displayed on the screen (default: 10 items). Thus, it does not have any impact on the performance of the application. So, it is preferable to use the FlatList Component to display a large list of data.

React Navigation

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app.

npm install @react-navigation/native

Thanks For Reading.

Get request with Basic authorization for React Native Mobile application

sayCheese — Wed, 16 Feb 2022 11:42:47 +0000

Hey Dev Community,

Welcome everyone.

This article is about how to use Fetch API Get request with Basic authorization for React Native Mobile application.

Basic Authentication is when raw(or with basic encoding) username and password is sent to the server, typically in its body

 headers: {
           Authorization: "Basic " + base64.encode(username + ":" + password),

Sending credential pair in 'Authorization' header of a request can be also considered as basic authentication request:

It consists of a prefix Basic (or some other word) and base64 encoding of username and password separated by colon (:)

Authorization key used in header can also be changed to some other name, while the server is configured to parse that key.

Check below code with comments for how I used.

const HomeScreen = () => {
  const [isLoading, setLoading] = useState(true);
  let [data, setData] = useState([]);

  let base64 = require("base-64"); // install it before use from npm i base-64

 const username = "some username goes here";
 const password = "some password goes here";

//function for Fetching data from API
const getMovies = async () => {
   try {
     const response = await fetch(
       "API URL goes here",
       {
         headers: {
           Authorization: "Basic " + base64.encode(username + ":" + password),
         },
       }
     );
     data = await response.json();

     setData(data);

     return data;
   } catch (error) {
     console.error(error);
   } finally {
     setLoading(false);
   }
 };

//use Effect hook
 useEffect(() => {
   getMovies();
 }, []);

return (
    <View style={styles.container}>
//rendering API data in FlatList view
        <FlatList
            keyExtractor={(item) => item.id}
            data={data}
            contentContainerStyle={styles.listCtn}
            renderItem={({ item }) => ( 
          <View style={styles.productImagesCtn}>
                <Image
                  style={styles.productImages}
                  source={{
                    uri: item.images[0].src,
                  }}
                />
          </View>
           )}
         />
       </View>
 );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: "center",
  },

  productImagesCtn: {
    width: Dimensions.get("window").width / 3,
    marginVertical: 20,
  },
  productImages: {
    width: "100%",
    height: 158,
  },
listCtn: {
    justifyContent: "space-around",
    flexDirection: "row",
    flexWrap: "wrap",
  },
});

References used from:

Give a suggestions for edit in comments will definitely fix.

Thanks for Reading.