Support reflow
On Android, all elements should be placed in a scrollable layout, such as a ScrollView or RecyclerView. Never use fixed values for any heights or widths.
xml
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content should scroll!" />
</ScrollView>In Jetpack Compose, all elements should be placed in a scrollable layout, such as a LazyList) or by adding verticalScroll.verticalScroll(androidx.compose.foundation.ScrollState,kotlin.Boolean,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean)) modifier to container Composables (e.g Column) or Box)). Never use fixed values for any heights or widths.
kotlin
// Using LazyColumn
LazyColumn {
item {
Text(text = "Content should scroll!")
}
}
// Using vericalScroll modifier
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
Text(text = "Content should scroll!")
}On iOS, all elements should be placed in a scrollable layout, such as UIScrollView, UITableView or UICollectionView. Never use fixed values for any heights or widths.
swift
let label = UILabel()
label.text = "Content should scroll!"
let view = UIView()
view.addSubview(label)
let scrollView = UIScrollView()
scrollView.addSubview(view)In SwiftUI, all elements should be placed in a scrollable layout, such as ScrollView or List views. Never use fixed values for any heights or widths.
swift
ScrollView {
VStack {
Text("Content should scroll!")
.padding()
// Add more views here if needed
// For example:
ForEach(0..<20) { index in
Text("Additional content \(index)")
.padding()
}
}
.frame(maxWidth: .infinity) // Make sure content expands to fill the scrollable area
}In Flutter, all elements should be placed in a scalable widget, such as SingleChildScrollView or ListView. These widgets ensures that underlying widgets will become scrollable, in case they do not fit on the screen.
dart
SingleChildScrollView(
child: Text(
'Content should scroll!',
softWrap: true,
overflow: TextOverflow.visible,
),
)In React Native, your elements should be placed inside a scrollable layout, such as ScrollView. If the elements don't fit, the view becomes scrollable over the vertical axis so the user can still reach them. Ideally scrolling is only necessary in one direction.
jsx
<ScrollView>
<Text>
Content should scroll!
</Text>
</ScrollView>In MAUI, you can put UI elements inside a ScrollView. Other components available for dynamic UI include:
CollectionView: for multi dimensional contentListView: for one dimensional contentWebView: for web content
Usage (C#)
csharp
var scrollView = new ScrollView
{
Content = new Label
{
Text = "Content should scroll!"
}
};xml
<ScrollView>
<Label Text="Content should scroll!" />
</ScrollView>When using Xamarin.Forms, your elements should be placed inside a scrollable layout, such as:
ScrollView: for static contentCollectionView: for multi dimensional contentListView: for one dimensional contentWebView: for web content
xml
<ScrollView>
<Label Text="Content should scroll!" />
</ScrollView>