Forem: Tuan Luong

React Native Collapsible

Tuan Luong — Sun, 15 Aug 2021 05:42:41 +0000

1. Key features:

1️⃣ Support FlatList/ScrollView
2️⃣ Support sticky header
3️⃣ Can have multiple sticky headers
4️⃣ Easy to customize

2. Usage

import {
  CollapsibleContainer,
  CollapsibleFlatList,
  CollapsibleScrollView,
} from '@r0b0t3d/react-native-collapsible';

// ...
const MyComponent = () => {
  const {
    collapse,   // <-- Collapse header
    expand,     // <-- Expand header
    scrollY,    // <-- Animated scroll position. In case you need to do some animation in your header or somewhere else
  } = useCollapsibleContext();

  return (
    <CollapsibleContainer>          // 1️⃣ (Required) 
      <CollapsibleHeaderContainer>  // 2️⃣ (Required) 
        <!-- Your header view -->
        <StickyView>                // 3️⃣ (Optional)
          <!-- Your sticky view goes here -->
        </StickyView>
      </CollapsibleHeaderContainer>
      <CollapsibleFlatList          // 4️⃣ (Required)
        data={data}
        renderItem={renderItem}
        headerSnappable={false}
      />
    </CollapsibleContainer>
  )
}

export default withCollapsibleContext(MyComponent); // 5️⃣ (Required)

Explanation:
1️⃣ CollapsibleContainer (Required)

This is the outer most container that contains other views

2️⃣ CollapsibleHeaderContainer (Required)

Your header view must go inside here

3️⃣ StickyView (Optional)

Define view that will be sticked at the top when scrolling

4️⃣ CollapsibleFlatList (Required)

This is your scroll view, it can be CollapsibleFlatList or CollapsibleScrollView

5️⃣ withCollapsibleContext (Required)

You need to wrap your component with this HOC

Advanced

In this example, we have 2 tabs. In first tab, we also have SearchInput that will also stick to top when scrolling.

Note: You can use single CollapsibleHeaderContainer and conditional show/hide SearchInput when tab selected. But breaking it into small component make you easier control your logic.

`Parent.tsx`

const Parent = () => {
  const [tabIndex, setTabIndex] = useState(0)

  return (
    <CollapsibleContainer>
      <CollapsibleHeaderContainer>
        <!-- Your header view -->
        <StickyView>
          <TabView currentTab={tabIndex} onTabChange={setTabIndex} />
        </StickyView>
      </CollapsibleHeaderContainer>

      {tabIndex === 0 && <FirstTab />}
      {tabIndex === 1 && <SecondTab />}
    </CollapsibleContainer>
  )
}

`FirstTab.tsx`

const FirstTab = () => {
  return (
    <>
      <CollapsibleHeaderContainer>
        <!-- 😍 You can have another headerview in each tab where you can add another StickyView there -->
        <StickyView>
          <!-- Your sticky view goes here -->
        </StickyView>
        <View />
        <StickyView>
          <SearchInput />
        </StickyView>
      </CollapsibleHeaderContainer>
      <CollapsibleFlatList
        data={data}
        renderItem={renderItem}
      />
    </>
  )
}

Explanation:
In the FirstTab.tsx, you will have another CollapsibleHeaderContainer and StickyView that contains your SearchInput. Note that, this CollapsibleHeaderContainer must be same level with the outer one. That's why we use Fragment in FirstTab

To learn more or want to contribute, please head over to the repo.

Happy coding! 🐧

React native Lazy component

Tuan Luong — Mon, 12 Jul 2021 03:41:56 +0000

Cover Credit

Brief story

Recently, I worked on a screen that has multiple tabs, each tabs has multiple heavy components (charts, large lists, ...). And everything is imported to the main screen that make it very slow to load.

So, I came up with something like lazy loading. Just load the component when needed.

Before 🙁

import HeavyTab1 from './components/HeavyTab1'
import HeavyTab2 from './components/HeavyTab2'
import HeavyTab3 from './components/HeavyTab3'

export default function Screen() {
    const [currentTab, setCurrentTab] = useState('tab1')

    return (
        <View>
            {currentTab === 'tab1' && (
                <HeavyTab1 prop1={data1} props2={data2} />
            )}
            {currentTab === 'tab2' && <HeavyTab2 />}
            {currentTab === 'tab3' && <HeavyTab3 />}
        </View>
    )
}

After 😍

import LazyComponent from "@r0b0t3d/react-native-lazy-component";

export default function Screen() {
    const [currentTab, setCurrentTab] = useState('tab1')

    return (
        <View>
            <LazyComponent
                visible={currentTab === 'tab1'}
                load={() => import('./components/HeavyTab1')} // or require('./components/HeavyTab1')
                prop1={data1}
                props2={data2}
            />
            <LazyComponent
                visible={currentTab === 'tab2'}
                load={() => import('./components/HeavyTab2')}
            />
            <LazyComponent
                visible={currentTab === 'tab3'}
                load={() => import('./components/HeavyTab3')}
            />
        </View>
    )
}

Check it out @r0b0t3d/react-native-lazy-component

Happy coding!

iOS devices connecting and disconnecting rapidly

Tuan Luong — Thu, 04 Mar 2021 03:59:34 +0000

I have been struggled with this issue for years. When connect my iPad to my Macbook Pro, it connected and disconnected then connected and disconnected.... This make me crazy sometime. Today I decided to research for a solution.

After googling, I found this thread https://www.ifixit.com/Answers/View/473839/iOS+devices+connecting+and+disconnecting+rapidly.

Below are some methods I tried.

1. Reset SMC

- Unplug the power, then shut down your Mac.
- Hold the left Shift+Control+Option keys down, then press and hold the power button down. Keep all four buttons pressed down for ten seconds, then let go.
- Plug the power cable back in, then turn on your Mac.

2. Reset the privacy settings in iOS

Settings > General > Reset > Reset Location & Privacy

3. Restart `usbd` deamon program

Open terminal, run this

sudo killall usbd

If not work, try this

sudo killall -STOP -c usbd

And lucky me. My iPad can connect with my Macbook Pro after running sudo killall -STOP -c usbd and now I can debug using my iPad.

You can add alias to make quick access to it

echo -n "alias fix-ios='sudo killall -STOP -c usbd'" >> ~/.zshrc

Later then, just run fix-ios

If you got this issue, please try then let me know which one works for you.

Happy ending!

Pretty git log

Tuan Luong — Sat, 14 Nov 2020 06:41:35 +0000

If you are seeing that default git log is not visual and hard to read. You can try to do some customizes by using --graph and --pretty.

git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit

Or shorter with alias

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

Finally

git lg

Let try to update colors as you like.
Happy coding!

Source: https://coderwall.com/p/euwpig/a-better-git-log