Drzaln

UPDATE, MULAI RN 0.69 MANUAL LINKING SUDAH DIREMOVE (npx react-native link menjadi npx react-native-asset)

1. Masukkan Font keadalam direktori src/assets/fonts
2. buat file react-native.config.js di direktori root lalu isi dengan

module.exports = {
    assets: ['./src/assets/fonts/'] 
}

Drzaln

Tambahkan kode berikut di dalam <styles> tag pada file styles.xml

<item name="android:forceDarkAllowed">false</item>

sehingga file styles.xml menjadi seperti ini

<resources>
 

Drzaln

import { withNavigationFocus } from 'react-navigation';

const FocusAwareStatusBar = withNavigationFocus(({ isFocused, ...rest }) =>
  isFocused ? <StatusBar {...rest} /> : null,
);

<FocusAwareStatusBar
   translucent
   backgroundColor="transparent"
   barStyle="dark-content"

Drzaln

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override

Drzaln

BUILD

cd android/ && ./gradlew assembleRelease && cd ..

WRAP

wrap with INTUNE

Drzaln

add this line to user setting "workbench.editor.tabCloseButton": "left",

Drzaln

1. Enable Developer Mode in Settings -> Privacy & Security
2. install ios-deploy globally using npm install -g ios-deploy
3. run xcrun xctrace list devices to list all devices
4. run npx react-native run-ios --device "phone name"

Drzaln

rounded corner outer = inside round corner + padding

from https://set.studio/relative-rounded-corners/

Drzaln

import React, {useRef, useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
  Easing,
  withDelay,
} from 'react-native-reanimated';

Drzaln

import React from 'react';
import {View, StyleSheet, Pressable, LayoutChangeEvent} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  Easing,
} from 'react-native-reanimated';
import LinearGradient from 'react-native-linear-gradient';