I'm facing one issue on android and react native changes of. The scenario is, in react native I have called api to update state of data and show the following view if data return empty array then hide view. The problem is if I check empty array condition then it works fine on react native pages of react component but using same senario react native component is not visible on android layout. But if I remove condition check then it is working on both android and react native pages.
I have observe this on any react native component is, Whenever we open on any react component the render method is called twice or thrice time. For first time it takes the initial value of state declare in constructor and render on both android and react native pages then we make state update in componentDidMount then again the render method is called but this time updated state component is appering on react native page but not on android layout. I belive that's what happening here it takes initial value and render on native pages but when state got updated then it is not re-rendering in android layout but it is working on react native pages.
So, if you guys have any idea or solution for this please let me know and feel free to ask any question related to this.
/*Attach this fragment in activity where you want to show this fragmentAdd this in activity: FragmentManager fragmentManager = getSupportFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); Fragment fragment = StripFragment.newInstance("Q&A", "1"); fragmentTransaction.add(R.id.includeLayout, fragment); fragmentTransaction.commit();Add this in activity xml file:<include layout="@layout/fragmentStrip" android:id="@+id/includeLayout" android:layout_width="match_parent" android:layout_height="wrap_content"/>*/public class StripFragment extends Fragment implements DefaultHardwareBackBtnHandler, ReactInstanceManager.ReactInstanceEventListener { private static final String TAG = "StripFragment"; private static final String STRIP_MODULE_NAME = "moduleName"; private static final String STRIP_MODULE_TYPE = "moduleType"; public final String PAGE_TYPE = "PAGE_TYPE"; public final String PROPS_PARAM = "propsParam"; private ReactInstanceManager mReactInstanceManager; private Context mContext; private ReactContext mReactContext; private ReactRootView mReactRootView; private FrameLayout parent; public static StripFragment newInstance(String moduleName, String moduleType) { StripFragment fragment = new StripFragment(); Bundle args = new Bundle(); args.putString(STRIP_MODULE_NAME, moduleName); args.putString(STRIP_MODULE_TYPE, moduleType); fragment.setArguments(args); return fragment; } @Override public void onAttach(@NonNull Context context) { super.onAttach(context); mContext = context; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactInstanceManager = ReactInstanceSingleton.getReactInstanceManager(Objects.requireNonNull(getActivity()).getApplication()); if (mReactContext == null) { mReactContext = mReactInstanceManager.getCurrentReactContext(); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final View view = inflater.inflate(R.layout.fragmentStrip, container, false); parent = view.findViewById(R.id.stripFrameLayout); return view; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); String moduleName = null; String moduleType = null; JSONObject header_obj = new JSONObject(); JSONObject obj = new JSONObject(); if (getArguments() != null) { moduleName = getArguments().getString(STRIP_MODULE_NAME, null); moduleType = getArguments().getString(STRIP_MODULE_TYPE, null); } try { if (moduleName != null && moduleType != null) { obj.put("moduleName", moduleName); obj.put("moduleType", moduleType); } } catch (JSONException e) { e.printStackTrace(); } final Bundle bundle = new Bundle(); bundle.putString(PAGE_TYPE, "MyStripFragment"); bundle.putString(PROPS_PARAM, obj.toString()); mReactRootView = new ReactRootView(Objects.requireNonNull(getActivity()).getApplicationContext()); parent.addView(mReactRootView); new Handler().postDelayed(new Runnable() { @Override public void run() { try { FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) mReactRootView.getLayoutParams(); layoutParams.height = parent.getMeasuredHeight(); layoutParams.width = parent.getMeasuredWidth(); mReactRootView.setLayoutParams(layoutParams); parent.invalidate(); mReactRootView.invalidate(); } catch (Exception e) { e.printStackTrace(); } } }, 500); try { mReactRootView.startReactApplication( mReactInstanceManager,"MyApplication", bundle ); } catch (Exception e) { e.printStackTrace(); } } @Override public void onReactContextInitialized(ReactContext context) { mReactContext = context; } @Override public void invokeDefaultOnBackPressed() {} @Override public void onDestroy() { super.onDestroy(); try { if (mReactInstanceManager != null) { mReactInstanceManager = null; } if (mReactRootView != null) { mReactRootView.unmountReactApplication(); mReactRootView = null; } if (mReactContext != null) { mReactContext = null; } if (parent != null) { parent.removeAllViews(); parent = null; } } catch (Exception e) { e.printStackTrace(); } }}
// XML layout file fragmentStrip.xml
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/stripFrameLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginHorizontal="@dimen/dimen8dp" tools:context=".app.Application.StripFragment"></FrameLayout>
//React native router.js file
_setStripPropsData = () => { let objStr = JSON.parse(this.props.propsParam); let moduleType = objStr.moduleType ? objStr.moduleType : null; let moduleName = objStr.moduleName ? objStr.moduleName : null; return <MyComponent moduleType={moduleType} moduleName={moduleName} />; };if (this.props.PAGE_TYPE == "MyStripFragment") { return this._setStripPropsData(); }
// MyComponent.js file
export default class MyComponent extends React.PureComponent {constructor(props) { super(props); this.state = { data: [], };}// I'm updating data with api call and api is working finerender(){<View><Text>Text1</Text>{this.state.data != undefined &&this.state.data.length > 0 ?(<Text>Text2</Text><FlatList horizontal={true} data={this.state.data} renderItem={this.renderItem} keyExtractor={(item, index) => index.toString()} />): null}</View>}}